Javascript FlatList不显示任何数据

我试图通过编写一个简单的应用程序来学习React native，但是我在让FlatList显示虚拟数据方面遇到了困难

我在这里检查了一些其他答案，但没有一个能解决我的问题，因为所有的答案都是空白的

App.tsx

import React，{Component}来自'React'；
从“react native”导入{视图、平台、状态栏}；
从“/src/FriendList”导入好友列表；
导出默认类应用程序扩展组件{
render（）{
返回(
);
}
}
const friends=Array.apply（null，数组（60））.map（（v，i）=>{
返回{
id:我，
src:'http://placehold.it/200x200?text=“+（i+1）
};
});

FriendList.tsx

import React，{Component}来自'React'；
从“react native”导入{样式表、视图、图像、平面列表、文本}；
导出默认类FriendList扩展组件{
建造师（道具）{
超级（道具）；
}
render（）{
返回(
(
)}
numColumns={3}
keyExtractor={（项，索引）=>item.id.toString（）}
/>
);
}
}
const styles=StyleSheet.create({
主容器：{
为内容辩护：“中心”，
弹性：1，
加油站：30
},
图像缩略图：{
为内容辩护：“中心”，
对齐项目：“居中”，
身高：100
}
});

---

我可能应该提到，该应用程序构建良好，没有错误/警告，只是在平面列表中没有显示任何数据。

尝试从

renderItem中删除
flex:1

<FlatList data={this.props.items} renderItem={({item}) => (
    // remove flex: 1 here
    <View style={{flexDirection: 'column', margin: 1}}>
        <Image style={styles.imageThumbnail} source={{ uri: item.src}} />
    </View>
  )}
  numColumns={3}
  keyExtractor={(item, index) => item.id.toString()}
/>

(
//删除flex:1
)}
numColumns={3}
keyExtractor={（项，索引）=>item.id.toString（）}
/>
尝试从
renderItem

<FlatList data={this.props.items} renderItem={({item}) => (
    // remove flex: 1 here
    <View style={{flexDirection: 'column', margin: 1}}>
        <Image style={styles.imageThumbnail} source={{ uri: item.src}} />
    </View>
  )}
  numColumns={3}
  keyExtractor={(item, index) => item.id.toString()}
/>

(
//删除flex:1
)}
numColumns={3}
keyExtractor={（项，索引）=>item.id.toString（）}
/>
从FriendList组件中删除MainContainer样式解决了我的问题。
从FriendList组件中删除MainContainer样式解决了我的问题

请尝试此代码

import React，{Component}来自'React'；
从“react native”导入{FlatList，StyleSheet，Text，View}；
导出默认类应用程序扩展组件{
状态={
付款详情：[
{
id:1，
textData:“数据1”，
},
{
id:2，
textData:“数据2”，
},
{
id:3，
textData:“数据3”，
},
]
}
renderFlatListView=（）=>{
返回(
)
}
renderFlatListDataView=（{index，item}）=>{
console.log（item.id）
返回(
{item.textData}
)
}
render（）{
返回(
{this.renderFlatListView（）}
);
}
}
const styles=StyleSheet.create({
容器：{
弹性：1，
为内容辩护：“中心”，
对齐项目：“居中”，
背景颜色：“#F5FCFF”，
玛金托普：50，
},
});

请尝试此代码

import React，{Component}来自'React'；
从“react native”导入{FlatList，StyleSheet，Text，View}；
导出默认类应用程序扩展组件{
状态={
付款详情：[
{
id:1，
textData:“数据1”，
},
{
id:2，
textData:“数据2”，
},
{
id:3，
textData:“数据3”，
},
]
}
renderFlatListView=（）=>{
返回(
)
}
renderFlatListDataView=（{index，item}）=>{
console.log（item.id）
返回(
{item.textData}
)
}
render（）{
返回(
{this.renderFlatListView（）}
);
}
}
const styles=StyleSheet.create({
容器：{
弹性：1，
为内容辩护：“中心”，
对齐项目：“居中”，
背景颜色：“#F5FCFF”，
玛金托普：50，
},
});
请使用此代码

 import React, { Component } from 'react';
    import { FlatList, StyleSheet, Text, View } from 'react-native';

    const Details= [
      {
        id: 1,
        textData: 'test1',
      },
      {
        id: 2,
        textData: 'test2',
      },
      {
        id: 3,
        textData: 'test3',
      },
      {
        id: 4,
        textData: 'test3',
      },
    ]

     class AppDetails extends Component {

      _renderItem= ({ index, item }) => {
        return (
          <View key={index}>
            <Text>{item.textData}</Text>
          </View>
        )
      }

      render() {
        return (
          <View style={styles.container}>
             <FlatList
              data={Details}
              extraData={this.state}
              keyExtractor={this.keyExtractor}
             renderItem={this._renderItem}
            />
          </View>
        );
      }
    }

    const styles = StyleSheet.create({
      container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
        marginTop: 50,
      },
    });

    export default AppDetails;

import React，{Component}来自'React'；
从“react native”导入{FlatList，StyleSheet，Text，View}；
常量详细信息=[
{
id:1，
textData:'test1'，
},
{
id:2，
textData:'test2'，
},
{
id:3，
textData:'test3'，
},
{
id:4，
textData:'test3'，
},
]
类AppDetails扩展组件{
_renderItem=（{index，item}）=>{
返回(
{item.textData}
)
}
render（）{
返回(
);
}
}
const styles=StyleSheet.create({
容器：{
弹性：1，
为内容辩护：“中心”，
对齐项目：“居中”，
背景颜色：“#F5FCFF”，
玛金托普：50，
},
});
导出默认AppDetails；
请使用此代码

 import React, { Component } from 'react';
    import { FlatList, StyleSheet, Text, View } from 'react-native';

    const Details= [
      {
        id: 1,
        textData: 'test1',
      },
      {
        id: 2,
        textData: 'test2',
      },
      {
        id: 3,
        textData: 'test3',
      },
      {
        id: 4,
        textData: 'test3',
      },
    ]

     class AppDetails extends Component {

      _renderItem= ({ index, item }) => {
        return (
          <View key={index}>
            <Text>{item.textData}</Text>
          </View>
        )
      }

      render() {
        return (
          <View style={styles.container}>
             <FlatList
              data={Details}
              extraData={this.state}
              keyExtractor={this.keyExtractor}
             renderItem={this._renderItem}
            />
          </View>
        );
      }
    }

    const styles = StyleSheet.create({
      container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
        marginTop: 50,
      },
    });

    export default AppDetails;

import React，{Component}来自'React'；
从“react native”导入{FlatList，StyleSheet，Text，View}；
常量详细信息=[
{
id:1，
textData:'test1'，
},
{
id:2，
textData:'test2'，
},
{
id:3，
textData:'test3'，
},
{
id:4，
textData:'test3'，
},
]
类AppDetails扩展组件{
_renderItem=（{index，item}）=>{
返回(
{item.textData}
)
}
render（）{
返回(
);
}
}
const styles=StyleSheet.create({
容器：{
弹性：1，
为内容辩护：“中心”，
对齐项目：“居中”，
背景颜色：“#F5FCFF”，
玛金托普：50，
},
});
导出默认AppDetails；
也许您也应该为imageThumbnail添加宽度和大小模式。请尝试使用
控制台.log
查看
此.props.items
是否为空。同时为
i添加宽度