React Native Flatlist numColumns 没有制作多列

Question

我刚刚开始学习 React Native，这是我的第一个项目——一个新闻应用。不过，我已经使用 React Native Flatlist 成功渲染了新闻的图像和描述。

但是当我使用 numColumns 制作两列时，列号保持不变。但是显示的图像数量变成了一半（即在我的情况下从 18 到 9）。并且图像的描述也在下一条新闻的图像下方，如下所示 -

      

我的源代码如下所示 -

import React, { Component } from 'react'
import { View, Text, FlatList, TouchableHighlight, SectionList, TouchableOpacity , Image,StyleSheet } from 'react-native'
import { ScrollView } from 'react-native-gesture-handler';
import { HomeNewsJSON } from "../../../../assects/JSON/Home"

class HomeNews extends Component {
  constructor(props) {
    super(props);
    this.state = {
      news: ""
    };
  }

  componentDidMount() {
    this.getInfo();
  }

  getInfo() {
    var data = []
    var jsondata = HomeNewsJSON["items"]
    // alert(jsondata.length)
    this.setState({
      news: jsondata
    })
  }
  renderImage(item) {
    var a = item;
    return (
        <TouchableOpacity  
                 style={{flex:1/3,
                 aspectRatio:1}}>
                <Image style={{flex: 1}} resizeMode='cover' source={{ uri:  (a.slice(a.indexOf("src") + 5, a.indexOf("</a>") - 3))}}></Image>
        </TouchableOpacity>
    )
}
  renderPic(data) {
    var a = data;
    return (a.slice(a.indexOf("src") + 5, a.indexOf("</a>") - 3));
  }

  render() {
    var result = Object.entries(this.state.news);
    console.log(result)
    return (
      <View>
        <FlatList
          contentContainerStyle={{margin:2}}
          style={{borderWidth: 0}}
          horizontal={false}
          numColumns={2}
          keyExtractor={item => item.findIndex}
          data={result}
          renderItem={({ item }) => (
            <View>
              {this.renderImage(item[1]["description"])}
              <Text>{item[1]["description"]}</Text>
            </View>
          )}
        />
      </View>
    )
  }
}

export default HomeNews

请任何人给我建议一种解决方法。非常感谢您提供的任何帮助。

Answer 1

尝试使用 flex:1 在项目外查看

  renderItem={({ item }) => (
     <View
            style={{
              flex: 1,
              flexDirection: 'column',
            }}>
           //image here
          </View>
)

Answer 2

我们试试在视图中添加flexDirection : 'row'，如：

<View style={{flexDirection : 'row'}}>
  {this.renderImage(item[1]["description"])}
  <Text>{item[1]["description"]}</Text>
</View>