React native React本机Flatlist numColumns未生成多个列

我刚刚开始学习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

import React，{Component}来自“React”
从“react native”导入{View、Text、FlatList、TouchableHighlight、SectionList、TouchableOpacity、Image、StyleSheet}
从“反应本机手势处理程序”导入{ScrollView}；
从“../../../../../assects/JSON/Home”导入{HomeNewsJSON}
类HomeNews扩展组件{
建造师（道具）{
超级（道具）；
此.state={
新闻：“
};
}
componentDidMount（）{
这个.getInfo（）；
}
getInfo（）{
var数据=[]
var jsondata=HomeNewsJSON[“项目”]
//警报（jsondata.length）
这是我的国家({
新闻：杰森达
})
}
渲染（项目）{
var a=项目；
返回(
)
}
renderPic（数据）{
var a=数据；
返回（a.slice（a.indexOf（“src”）+5，a.indexOf（“”-3））；
}
render（）{
var result=Object.entries（this.state.news）；
console.log（结果）
返回(
item.findIndex}
数据={result}
renderItem={（{item}）=>(
{this.renderImage（项目[1][“说明”]）}
{项目[1][“说明”]}
)}
/>
)
}
}
导出默认的HomeNews

---

任何人，请给我一个解决的办法。非常感谢您提供的任何帮助。

让我们尝试在视图中添加

flexDirection:“行”

，例如：

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

{this.renderImage（项目[1][“说明”]）}
{项目[1][“说明”]}

让我们尝试在视图中添加

flexDirection:“行”

，例如：

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

{this.renderImage（项目[1][“说明”]）}
{项目[1][“说明”]}

尝试flex:1，视图位于项目外部

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

renderItem={（{item}）=>(
//图像在这里
)

尝试flex:1，视图位于项目外部

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

renderItem={（{item}）=>(
//图像在这里
)

抱歉，这没有帮助…相反，已渲染的图像也会停止渲染…抱歉，这没有帮助…相反，已渲染的图像也会停止渲染。。。