如何在React Native中排列卡片以形成网格视图？

Question

我想以这样的方式排列卡片，使其形成网格视图。我尝试了几个网格视图组件，但我无法导航到数据中的每个项目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>

如何将其设为网格视图？这样，连续有 2 张卡片。请帮忙。这就是我现在得到的 https://i.stack.imgur.com/vtnuv.png。我试图给出FlexDirection:row，但所有卡片都会出现在同一行。所以我删除了它。请帮助我找到解决方案。

Answer 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>