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>

如何使它成为网格视图？这样一排中有两张卡片。请帮忙。这就是我现在得到的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>

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

1 个答案: