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);