React Native基础开发者如何用react-native-easy-grid实现两列渲染？

嘿，既然你已经有React Native基础，还用上了react-native-easy-grid，那咱们直接把两列列表的实现给捋顺！

核心思路很简单：把你从接口拿到的数据源拆分成左右两组，分别对应Grid里的两个Col，每个Col内部用FlatList渲染自己那组数据就行。

第一步：拆分数据源 #

在你现有的componentDidMount数据请求逻辑里，拿到接口返回的responseJson后，把它按索引奇偶拆分成左右两列的数据集：

componentDidMount() {
  return fetch(ConfigApp.URL+'json/data_posts.php')
    .then((response) => response.json())
    .then((responseJson) => {
      // 按索引奇偶拆分数据到左右两列
      const leftData = [];
      const rightData = [];
      responseJson.forEach((item, index) => {
        index % 2 === 0 ? leftData.push(item) : rightData.push(item);
      });
      
      this.setState({
        isLoading: false,
        leftData,
        rightData
      });
    })
    .catch((error) => {
      console.error(error);
    });
}

第二步：用Grid+Col+FlatList渲染两列 #

接下来在render方法里，先处理加载状态，再用Grid包裹两个Col，每个Col里放对应的FlatList渲染列表项：

render() {
  // 加载状态显示加载指示器
  if (this.state.isLoading) {
    return (
      <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
        <ActivityIndicator size="large" color="#000" />
      </View>
    );
  }

  return (
    <Grid style={{padding: 8}}>
      {/* 左列列表 */}
      <Col>
        <FlatList
          data={this.state.leftData}
          keyExtractor={(item, index) => `left-${index}`}
          renderItem={({item}) => (
            // 替换成你的自定义列表项组件，这里是示例样式
            <View style={{
              backgroundColor: '#f5f5f5',
              marginBottom: 10,
              padding: 12,
              borderRadius: 6
            }}>
              <Text style={{fontSize: 16, fontWeight: '500'}}>{item.title}</Text>
              <Text style={{fontSize: 14, color: '#666', marginTop: 4}}>{item.description}</Text>
              {/* 可添加图片等其他内容 */}
            </View>
          )}
        />
      </Col>

      {/* 右列列表 */}
      <Col>
        <FlatList
          data={this.state.rightData}
          keyExtractor={(item, index) => `right-${index}`}
          renderItem={({item}) => (
            // 和左列保持统一的列表项样式
            <View style={{
              backgroundColor: '#f5f5f5',
              marginBottom: 10,
              padding: 12,
              borderRadius: 6
            }}>
              <Text style={{fontSize: 16, fontWeight: '500'}}>{item.title}</Text>
              <Text style={{fontSize: 14, color: '#666', marginTop: 4}}>{item.description}</Text>
            </View>
          )}
        />
      </Col>
    </Grid>
  );
}

几个小提醒 #

• 记得在组件的初始state里初始化这几个字段：state = { isLoading: true, leftData: [], rightData: [] }
• keyExtractor要保证每个列表项的key唯一，我这里用了left-和right-前缀区分两列的项，避免重复
• 如果你的数据项高度不固定，两个FlatList会各自独立滚动，这是这种方案的特点；如果想要整体滚动的两列布局，也可以考虑FlatList的numColumns属性，但既然你指定用react-native-easy-grid，上面的方案更贴合你的需求

内容的提问来源于stack exchange，提问作者bdroid