GridView 在 renderRow React Native 上返回 null答案

【问题标题】：GridView returns null on renderRow React NativeGridView 在 renderRow React Native 上返回 null
【发布时间】：2017-09-08 18:36:07
【问题描述】：

我正在使用React Native Grid View。我正在使用的数据源已正确加载。虽然，renderRow 没有收到数据。

getInitialState: function() {
        var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
        var data = Array.apply(null, {length: 40}).map(Number.call, Number);

        return {
            dataSource: ds.cloneWithRows(data)
        };
    },

_renderRow: function(rowData) {
        console.log(rowData);
        return (
            <View style={styles.item}>
                <Text>{rowData}</Text>
            </View>
        );
    },
render: function() {
        console.log(this.state.dataSource);
        return (
            <View style={styles.listContainer}>
                <GridView
                    dataSource={this.state.dataSource}
                    renderRow={this._renderRow}
                    numberOfItemsPerRow={5}
                    removeClippedSubviews={false}
                    initialListSize={1}
                    pageSize={5}
                />
            </View>
        );
    },

dataSource 日志显示数据已加载。但是 _renderRow 方法的控制台日志打印为 null。

这是为什么？

【问题讨论】：

标签： react-native

【解决方案1】：

啊，我想我找到了你的答案。我查看了文档，看来您需要致电 GridView.dataSource 而不是 ListView.dataSource

https://github.com/jskuby/react-native-gridview

const dataSource = new GridView.DataSource({
  rowHasChanged: (r1, r2) => r1 !== r2,
}).cloneWithRows(randomData);

【讨论】：

是的。就是这样。谢谢克里斯。

【解决方案2】：

您是否尝试过将 _renderRow 函数声明更改为 ES6 胖箭头语法？您是否有理由改用 ES5 语法？我从不使用 createComponent ，所以我不太熟悉它的问题，所以也许试试这个看看会发生什么。否则，我觉得一切都很好。

_renderRow = (rowData) => {
  console.log(rowData);
}

【讨论】：

感谢@Chris 的回复。是的，我已经尝试过了，但它确实返回了相同的空值。似乎无法弄清楚问题是什么。