ReactNative Demo - Dimensions 的使用

r囧r小猫 2022-09-23 13:59 240阅读 0赞 
  1. import React, {
  2.     Component
  3.   } from 'react';
  4.   import {
  5.     AppRegistry,
  6.     StyleSheet,
  7.     Text,
  8.     View,
  9.     Image,
  10.     DrawerLayoutAndroid,
  11.     ListView,
  12.     PixelRatio,
  13.     TextInput,
  14.     Dimensions,
  15.   } from 'react-native';
  18.   class AwesomeProject extends Component { 
  21.     render() {
  25.       return (
  28. <View style={styles.container}>
  29.             <View style={styles.child} />
  30.           </View>
  34.       );
  37.     }
  38.   }
  42.  class Search extends Component{ 
  44.    render(){
  45.       return(
  46.         <View style={[styles.flex,styles.flexDirection]}>
  47.           <View style={[styles.flex,styles.input]}>
  48.           <TextInput></TextInput>
  49.           </View>
  50.           <View style={styles.btn}>
  51.             <Text style={styles.search}>搜索</Text>
  52.           </View>
  53.         </View>
  54.         );
  55.     }
  56.  }
  61.   const styles = StyleSheet.create({
  62.     flex: {
  63.       flex:1,
  64.     },
  67.     flexDirection :{
  68.       flexDirection:'row',
  69.     },
  71.     topStatus : {
  72.       marginTop : 25,
  73.     } ,
  75.     input:{
  76.       height:45,
  77.       borderColor:'red',
  78.       borderWidth: 1,
  79.       marginLeft:10,
  81.       borderRadius:5,
  82.       paddingLeft:10,
  83.     },
  85.     btn:{
  86.       height:45,
  87.       width:45,
  88.       marginLeft:-5,
  89.       marginRight:5,
  90.       backgroundColor:'#23BEFF',
  91.       alignItems:'center', 
  92.       justifyContent:'center',
  94.     },
  95.     search:{
  96.       color:'#fff',
  97.       fontWeight:'bold',
  98.       fontSize:15,
  99.     },
  101.     container: {
  102.       backgroundColor:'green',
  103.       flex: 1,
  104.     },
  105.     child: {
  106.       flex: 1,
  107.       backgroundColor: 'blue',
  108.       transform: [
  109.         {
  110.           perspective: 850
  111.         },
  112.         {
  113.           translateX: -Dimensions.get('window').width * 0.24
  114.         },
  115.         {
  116.           rotateY: '60deg'
  117.         },
  119.       ],
  120.     }
  121.   });
  125.   AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);

发表评论

表情：
评论列表 （有 0 条评论，240人围观）

还没有评论，来说两句吧...

相关阅读