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

Question

我想以形成网格的方式排列卡片view.I已经尝试了几个网格视图组件，但我无法导航到 [=12] 数据中的每个项目=]。所以我想用我的 own.But 的 CardSection 制作网格视图我不知道如何在每行 2 张卡片中排列它 row.Following 是我的 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>

如何将其设为网格视图？这样 row.Please help.This 中的 2 张卡片就是我现在得到的 https://i.stack.imgur.com/vtnuv.png 。我试着给 FlexDirection:row ，但所有的卡片都会一样row.So 我删除了 that.Please 帮我解决一下。

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>

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

How to arrange cards to form a grid view in react native?

gridview

jsx

reactjs

react-native