布局表反应原生

【问题标题】：layout table react native布局表反应原生
【发布时间】：2018-10-17 21:22:42
【问题描述】：

嗨，我是 React Native 的新手我的问题是，我如何才能让这种布局设计与样式反应原生

我正在尝试使用

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

【问题讨论】：

标签： reactjs react-native layout styles

【解决方案1】：

您需要嵌套视图并将 flex-direction: 'row' 或 'column' 的样式应用于适当的视图。

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>

【讨论】：