ReactNative Demo - Dimensions 的使用

import React, {
    Component
  } from 'react';
  import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Image,
    DrawerLayoutAndroid,
    ListView,
    PixelRatio,
    TextInput,
    Dimensions,
  } from 'react-native';


  class AwesomeProject extends Component {


    render() {



      return (
       

<View style={styles.container}>
            <View style={styles.child} />
          </View>
        

          
      );


    }
  }



 class Search extends Component{
   
   render(){
      return(
        <View style={[styles.flex,styles.flexDirection]}>
          <View style={[styles.flex,styles.input]}>
          <TextInput></TextInput>
          </View>
          <View style={styles.btn}>
            <Text style={styles.search}>搜索</Text>
          </View>
        </View>
        );
    }
 }




  const styles = StyleSheet.create({
    flex: {
      flex:1,
    },

    
    flexDirection :{
      flexDirection:'row',
    },

    topStatus : {
      marginTop : 25,
    } ,

    input:{
      height:45,
      borderColor:'red',
      borderWidth: 1,
      marginLeft:10,
      
      borderRadius:5,
      paddingLeft:10,
    },
    
    btn:{
      height:45,
      width:45,
      marginLeft:-5,
      marginRight:5,
      backgroundColor:'#23BEFF',
      alignItems:'center', 
      justifyContent:'center',
      
    },
    search:{
      color:'#fff',
      fontWeight:'bold',
      fontSize:15,
    },

    container: {
      backgroundColor:'green',
      flex: 1,
    },
    child: {
      flex: 1,
      backgroundColor: 'blue',
      transform: [
        {
          perspective: 850
        },
        {
          translateX: -Dimensions.get('window').width * 0.24
        },
        {
          rotateY: '60deg'
        },

      ],
    }
  });
  
 

  AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);

转载请注明出处:http://www.jianshu.com/u/c864df301e25

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
禁止转载,如需转载请通过简信或评论联系作者。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,076评论 25 708
  • 前些日子从@张鑫旭微博处得一份推荐(Front-end-tutorial),号称最全的资源教程-前端涉及的所有知识...
    谷子多阅读 4,267评论 0 44
  • 今天复习了历史必修一第一单元的学考部分,一座五三的选择题为主,并学习了选修四第三专题,这部分知识在加试题中的大题目...
    一吻天荒LY阅读 139评论 0 0
  • 安装依赖文件(这些依赖文件是会被下载的)npm install --save app 安装开发时的依赖文件。但是这...
    赵BW阅读 210评论 0 0
  • 当我准备再次用文字记录我的生活以及想法的这段时间,是我最迷茫的时期。 人生一直都是充满未知与挑...
    VenYue阅读 186评论 0 0