时间戳

首页 > 解决方案 > react native如何排列卡片形成网格视图？

reactjs - react native如何排列卡片形成网格视图？

问题描述

我想以应该形成网格视图的方式排列卡片。我尝试了几个网格视图组件，但我无法导航到数据中的每个项目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，但所有的卡都会进来同一行。所以我删除了它。请帮我解决问题。

标签： reactjsreact-nativegridviewjsx

解决方案

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

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>

推荐阅读