Question

我正在使用React Native Grid View。我正在使用的dataSource已正确加载。虽然，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方法的控制台日志打印为空。

为什么会这样？

Answer 1

您是否尝试将_renderRow函数声明更改为ES6胖箭头synatax？您是否有使用ES5语法的原因？我不使用createComponent，所以我不太熟悉它的问题，所以也许只是尝试一下，看看会发生什么。否则，一切对我来说都很好。

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

Answer 2

啊，我想我找到了答案。我看了一下文档，看来你需要拨打GridView.dataSource而不是ListView.dataSource

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

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

GridView在renderRow React Native上返回null

2 个答案: