在 Listview 上反应原生白色背景输出答案

【问题标题】：React Native white background output on Listview在 Listview 上反应原生白色背景输出
【发布时间】：2018-04-27 04:23:07
【问题描述】：

我正在制作一个列表视图，我将从我的数据库中查看一些数据的列表。但是在运行程序后，我得到的只是白色背景屏幕。有谁知道解决办法吗？

screen shot

这是我的代码

export default class Pasta extends Component {
    constructor() {
        super()
        this.state = {
            dataSource: []
        }
    }

    renderItem = ({ item }) => {
    return (
            <View style = {{flex: 1, flexDirection: 'row'}}>
                <View style = {{flex: 1, justifyContent: 'center'}}>
                    <Text>
                        {item.menu_desc}
                    </Text>
                    <Text>
                        {item.menu_price}
                    </Text>
                </View>
            </View>
    )
    }

    componentDidMount() {
        const url = 'http://192.***.***.***:9090/menu'

        fetch(url)
        .then((response) => response.json())
        .then((responseJson) => {
            this.setState({
                dataSource: responseJson.menu
            })
        })
    }

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

【问题讨论】：

在render() {之后添加console.log(this.state.dataSource)并添加输出
您是否为将在 FlatList 中调用的 renderItems 提供了唯一键。能否请您显示 FlatList 的代码
@stack26，这就是我的代码先生。我想我使用“renderItem”在 Flatlist 中调用它，并且 renderItem 包含“item”，它将用于将我的数据库中的数据显示到 Text。

标签： android react-native mobile react-native-android react-native-flatlist

【解决方案1】：

将 extraData 属性添加到您的 FlatList 以导致重新渲染

keyExtractor = (item, index) => item.id; // note: id is the unique key for each item

render() {
  return (
    <FlatList
      data = {this.state.dataSource}
      renderItem = {this.renderItem}
      extraData={this.state}
      keyExtractor={this.keyExtractor}
    />
   );
  }

同时记录并验证您的数据是否存在。我建议参考FlatList 文档以获取更多道具，例如keyExtractor 等。

【讨论】：

没有工作，先生，现在我有警告说； TypeError：网络请求失败
让我们调试一下，将您的网址替换为jsonplaceholder.typicode.com/posts 并验证您是否能够得到响应。
先生，没有任何变化。我仍然有白色背景，即使我设置了 backgroundcolor: "black" 它也不会改变。
没问题..你在 .then((responseJson) => { console.log(responseJson); this.setState({ dataSource: responseJson}) }) 中得到 responseJson。还要在渲染函数中记录 this.state.dataSource。
我做了 console.log(responseJson);在 this.setState 之前，先生。现在，在我浏览器的开发人员工具中，您链接中的所有数据都已显示。但我没有让你指出“在渲染函数中记录 this.state.dataSource”你在这部分是什么意思？