如何在本机反应中呈现两列中的项目? [英] How to render items in two columns in react native?

问题描述

我在 React Native 方面的技能是基本的，所以我想在两列中呈现项目，我正在使用这个库 https://github.com/GeekyAnts/react-native-easy-grid.

my skills in react native is basic, so i want to render items in two columns, i'm using this library https://github.com/GeekyAnts/react-native-easy-grid.

componentDidMount() {

   return fetch(ConfigApp.URL+'json/data_posts.php')
     .then((response) => response.json())
     .then((responseJson) => {
       this.setState({
         isLoading: false,
         dataSource: responseJson
       }, function() {
       });
     })
     .catch((error) => {
       console.error(error);
     });
 }

退货

 return (
 <Grid>
  <Col><FlatList
      data={ this.state.dataSource }
      refreshing="false"
      renderItem={({item}) => 
            <TouchableOpacity activeOpacity={1}>
            <ImageBackground source={{uri: ConfigApp.IMAGESFOLDER+item.post_image}} style={styles.background_card}>
                <LinearGradient colors={['rgba(0,0,0,0.6)', 'rgba(0,0,0,0.9)']} style={styles.gradient_card}>
                        <Text style={styles.category_card}>{item.category}</Text>
                        <Text style={styles.title_card}>{item.post_title}</Text>
                        <Text style={styles.subcategory_card}>{item.date}</Text>
                </LinearGradient>
            </ImageBackground>
            </TouchableOpacity>
 }
    keyExtractor={(item, index) => index}

    />
 </Col>
 </Grid>
    );

推荐答案

自从 FlatList 已经支持 numColumns，因此你可以做

Since FlatList already supports numColumns, therefore you can do

示例

const data = [1,2,3,4]


  <FlatList 
         data={data}
         numColumns={2}
         renderItem={(item) => <View style={{flex: 1, height: 200, margin: 5, backgroundColor: 'red'}}/>} // Adding some margin
   />

这篇关于如何在本机反应中呈现两列中的项目?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！