Windows下React Native的Android环境部署及布局示例

2019-12-10 18:46:26王冬梅

 

页面结构:

<View style={styles.wrap}>
  <View style={styles.left}>
   <Text style={styles.text}>
    这是左侧栏{'n'}
    这是左侧栏{'n'}
    这是左侧栏{'n'}
    这是左侧栏{'n'}
   </Text>
  </View>
  <View style={styles.right}>
   <Text style={styles.text}>
    这是右侧栏{'n'}
    这是右侧栏{'n'}
    这是右侧栏{'n'}
    这是右侧栏{'n'}
   </Text>
  </View>
</View>

Windows,React Native,Android环境部署

左中右布局
左右定宽,中间占满。

样式表:

wrap {
 flex:1;
 flex-direction: row;
 background-color: yellow;
}

left{
 width: 80;
 background-color: #64BA9D;
}

centent{
 flex:1;
 background-color: #a9ea00;
}

right{
 width: 80;
 background-color: #008E59;
}

text{
 padding:10;
 font-size:16;
 color:#EEEEEE;
 line-height:20;
 text-align: center;
}

页面结构:

<View style={styles.wrap}>
  <View style={styles.left}>
   <Text style={styles.text}>
    这是左侧栏{'n'}
    这是左侧栏{'n'}
    这是左侧栏{'n'}
    这是左侧栏{'n'}
   </Text>
  </View>
  <View style={styles.centent}>
   <Text style={styles.text}>
    这是内容区{'n'}
    这是内容区{'n'}
    这是内容区{'n'}
    这是内容区{'n'}
   </Text>
  </View>
  <View style={styles.right}>
   <Text style={styles.text}>
    这是右侧栏{'n'}
    这是右侧栏{'n'}
    这是右侧栏{'n'}
    这是右侧栏{'n'}
   </Text>
  </View>
</View>