布局表反应原生

Question

嗨，我是反应原生的新人 mi问题是，我如何能够将这种布局设计与原生风格相结合

我正在尝试使用

contain:{
   flexDirection: 'row',
   flexDirection: 'column', //or 
}

<View style={contain}>
   <View>el1</View>
   <View>el2</View>
   <View>el3</View>
   <View>el4</View>
   <View>el5</View>
</View>

但是没有用 感谢

http://appweplan.com:8080/public/images/layout.png

Answer 1

您需要嵌套视图并应用flex-direction的样式：＆＃39; row＆＃39;或者＆＃39;列＆＃39;到适当的观点。

const styles = {
  rowView: {
    flexDirection: 'row'
  },
  columnView: {
    flexDirection: 'column'  
  }
}

<View style={styles.rowView}>
 <View style={styles.columnView}>
     <Text>Column 1</Text>
     <Text>Column 1</Text>
 </View>
 <View style={styles.columnView}>
     <Text>Column 2</Text>
     <Text>Column 2</Text>         
 </View>
 <View style={styles.columnView}>
     <Text>Column 3</Text>
     <Text>Column 3</Text>
 </View>
</View>