React Native Flatlist numColumns 没有生成多个列

Question

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

\n

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

\n

\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0

\n

我的源代码如下所示 -

\n

import React, { Component } from \'react\'\nimport { View, Text, FlatList, TouchableHighlight, SectionList, TouchableOpacity , Image,StyleSheet } from \'react-native\'\nimport { ScrollView } from \'react-native-gesture-handler\';\nimport { HomeNewsJSON } from "../../../../assects/JSON/Home"\n\nclass HomeNews extends Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      news: ""\n    };\n  }\n\n  componentDidMount() {\n    this.getInfo();\n  }\n\n  getInfo() {\n    var data = []\n    var jsondata = HomeNewsJSON["items"]\n    // alert(jsondata.length)\n    this.setState({\n      news: jsondata\n    })\n  }\n  renderImage(item) {\n    var a = item;\n    return (\n        <TouchableOpacity  \n                 style={{flex:1/3,\n                 aspectRatio:1}}>\n                <Image style={{flex: 1}} resizeMode=\'cover\' source={{ uri:  (a.slice(a.indexOf("src") + 5, a.indexOf("</a>") - 3))}}></Image>\n        </TouchableOpacity>\n    )\n}\n  renderPic(data) {\n    var a = data;\n    return (a.slice(a.indexOf("src") + 5, a.indexOf("</a>") - 3));\n  }\n\n  render() {\n    var result = Object.entries(this.state.news);\n    console.log(result)\n    return (\n      <View>\n        <FlatList\n          contentContainerStyle={{margin:2}}\n          style={{borderWidth: 0}}\n          horizontal={false}\n          numColumns={2}\n          keyExtractor={item => item.findIndex}\n          data={result}\n          renderItem={({ item }) => (\n            <View>\n              {this.renderImage(item[1]["description"])}\n              <Text>{item[1]["description"]}</Text>\n            </View>\n          )}\n        />\n      </View>\n    )\n  }\n}\n\nexport default HomeNews\n

\n

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

\n

Answer 1

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

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