reactNative元素标识

//创建样式，所有的样式都是大括号使用

flexDirection:

row column row-reverse column-reverse 元素 关键字： flexDirection

justifyContent:

flex-start flex-end center space-between space-around 横向
关键字：justifyContent

alignContent:

flex-start flex-end center baseline stretch 纵向
关键字：alignItems

flewWrap:

nowrap wrap wrap-reverse //是否换行 关键字：flewWrap

alignSelf:

auto flex-start flex-end center baseline stretch 可以覆盖alignItems 关键字：alignSelf

      <View style={styles.container}>
        {/*<Text>*/}
          {/*其实我是存在的*/}
        {/*</Text>*/}
        {/*<View style={styles.innerView}>*/}
          {/*<Text>我是里面的View</Text>*/}
        {/*</View>*/}
        {/*<View style={styles.innerView2}>*/}
          {/*<Text>我是我下面的View</Text>*/}
        {/*</View>*/}
        <Text style={{backgroundColor:'red',flex:1, height:60, alignSelf:'flex-start'}}>第一个</Text>
        <Text style={{backgroundColor:'green',flex:1, height:70, alignSelf:'flex-end'}}>第二个</Text>
        <Text style={{backgroundColor:'blue',flex:2, height:80}}>第三个</Text>
        <Text style={{backgroundColor:'yellow',flex:1, height:90}}>第四个</Text>

      </View>

元素属性 flex (flex-grow flex-shrink flex-basis)
默认值为"0,1,auto"
宽度= 弹性宽度*(flexGrow / sum(flexGrow))

const styles = StyleSheet.create({
  container: {
    flexDirection:'row',// 改变主轴的方向
    backgroundColor:'purple',// 上边距
    marginTop:64, // flex-end 尾部  center
    marginLeft:20,
    marginRight:20,
    justifyContent:'flex-start', // 设置主轴的对其方式
    alignItems:'center', // 设置侧轴的对其方式
    flexWrap:'wrap', //显示不下，换一行
  },
});