react native如何排列卡片形成网格视图？答案

【问题标题】：How to arrange cards to form a grid view in react native?react native如何排列卡片形成网格视图？
【发布时间】：2019-04-02 06:40:06
【问题描述】：

我想以这样的方式排列卡片，使其形成一个网格视图。我尝试了几个网格视图组件，但我无法导航到 npm install react-native-super-grid 的数据中的每个项目。所以我想用我自己的CardSection 制作网格视图。但我不知道如何将它排列在每行 2 张卡片的行内。以下是我的 CardSection 代码

卡片部分

  const CardSection = (props) =>{
    return(
    <View style={styles.containerStyle}>
    {props.children}
    </View>
    );

};
const styles ={
    containerStyle: {
        padding: 10,
        backgroundColor: 'white',
        borderWidth:0,
        marginBottom:10,
        marginLeft:10,
        marginRight:10,
        borderColor:'#808080',
        marginTop:50,
        elevation: 10,
        flexDirection:'row',
       flexWrap:'wrap'
    }
};

我现在尝试的只是将卡片列出如下

列表

  <CardSection>
    <TouchableOpacity onPress={() => Actions.newworkRequest()}>
      <Text>New Work Request</Text>
    </TouchableOpacity>
  </CardSection>
  <CardSection>
   <TouchableOpacity onPress={() => Actions.workerDetails()}>
    <Text>Worker</Text>
   </TouchableOpacity>
  </CardSection>
  <CardSection>
   <TouchableOpacity onPress={() => Actions.reportViewing()}>
    <Text> Reports</Text>
   </TouchableOpacity>
  </CardSection>
  <CardSection>
   <TouchableOpacity onPress={() => Actions.compltpage()}>
    <Text> Complaints</Text>
   </TouchableOpacity>
  </CardSection>
  <CardSection>
   <TouchableOpacity onPress={() => Actions.userpage()}>
    <Text> Users</Text>
   </TouchableOpacity>
  </CardSection>

如何将其设为网格视图？这样连续两张牌。请帮忙。这就是我现在得到的https://i.stack.imgur.com/vtnuv.png。我试着给FlexDirection:row，但所有的牌都会排在同一行。所以我把它去掉了。请帮我解决。

【问题讨论】：

试试把flexDirection: rowflexWrap: wrap
我已经更改了CardSection 的containerStyle，但没有区别。更新了我的代码请看一下。

标签： reactjs react-native gridview jsx

【解决方案1】：

您必须在所有这些卡片部分的父级上应用这些样式..

const styles ={
  mainContainer: {
        flex: 1,
        flexWrap: 'wrap',
        flexDirection: 'row'
  },
  containerStyle: {
        padding: 10,
        backgroundColor: 'white',
        borderWidth:0,
        marginBottom:10,
        marginLeft:10,
        marginRight:10,
        borderColor:'#808080',
        marginTop:50,
        elevation: 10
    }
}

列表

<View style={styles.mainContainer}>
  <CardSection style={styles.containerStyle} />
  ...
</View>

【讨论】：

我很高兴@anu