7

我的 React Native 应用程序有一个应该显示可滚动列表的组件。我也在使用React Native Elements，尽管忽略它似乎并没有太大的区别。

我的组件如下所示：

export class MyComponent extends React.Component {
    constructor(props) {
        super(props);

        const ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 });
        this.state = { ds: ds.cloneWithRows(this.props.myItems) };
    }

    render() {
        return (
            <View>
                <Text>Some text here</Text>
                <List>
                    <ListView dataSource={ this.state.ds } renderRow={ renderRow } />
                </List>
            </View>
        );
    }
};

WhererenderRow在类之外声明，因为它不需要它的状态，如：

const renderRow = (rowData, sectionId) => {
    return (
        <ListItem
            key={ sectionId }
            title={ rowData.myProp }
            subtitle={ rowData.myOtherProp }
        />
    );
};

此外，删除<List>与它的孩子似乎也没有什么不同。

从日志记录（为简洁起见，未包含在代码中）我可以看到组件constructor运行没有问题。但是，该render方法没有被调用。在adb logcat输出中（我正在使用 Android 模拟器）我看到以下内容：

10-16 14:02:34.507 10161 10205 W ReactNativeJS: Possible Unhandled Promise Rejection (id: 0):
10-16 14:02:34.507 10161 10205 W ReactNativeJS: null is not an object (evaluating 'internalInstance.getHostNode')
10-16 14:02:34.507 10161 10205 W ReactNativeJS: getHostNode@http://10.0.2.2:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:16594:24
10-16 14:02:34.507 10161 10205 W ReactNativeJS: getHostNode@http://10.0.2.2:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:18320:35
10-16 14:02:34.507 10161 10205 W ReactNativeJS: getHostNode@http://10.0.2.2:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:16594:36
10-16 14:02:34.507 10161 10205 W ReactNativeJS: getHostNode@http://10.0.2.2:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:18320:35
10-16 14:02:34.507 10161 10205 W ReactNativeJS: getHostNode@http://10.0.2.2:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:16594:36
10-16 14:02:34.507 10161 10205 W ReactNativeJS: getHostNode@http://10.0.2.2:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:18320:35
10-16 14:02:34.507 10161 10205 W ReactNativeJS: getHostNode@http://10.0.2.2:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:16594:36
10-16 14:02:34.507 10161 10205 W ReactNativeJS: getHostNode@http://10.0.2.2:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:18320:35
10-16 14:02:34.507 10161 10205 W ReactNativeJS: getHostNode@http://10.0.2.2:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:16594:36
10-16 14:02:34.507 10161 10205 W ReactNativeJS: updateChildren@http://10.0.2.2:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:17792:47
10-16 14:02:34.507 10161 10205 W ReactNativeJS: _reconcilerUpdateChildren@http://10.0.2.2:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:17341:36
10-16 14:02:34.507 10161 10205 W ReactNativeJS: _updateChildren@http://10.0.2.2:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:17445:48
10-16 14:02:34.507 10161 10205 W ReactNativeJS: updateChildren@http://10.0.2.2:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:17432:21
10-16 14:02:34.507 10161 10205 W ReactNativeJS: receiveComponent@http://10.0.2.2:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:14715:20
10-16 14:02:34.507 10161 10205 W ReactNativeJS: receiveComponent@http://10.0.2.2:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:16656:34
10-16 14:02:34.507 10161 10205 W ReactNativeJS: _updateRenderedComponent@http://10.0.2.2:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:18688:33
10-16 14:02:34.507 10161 10205 W ReactNativeJS: _performComponentUpdate@http://10.0.2.2:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:18658:30
10-16 14:02:34.507 10161 10205 W ReactNativeJS: updateComponent@http://10.0.2.2:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:18579:29
10-16 14:02:34.507 10161 10205 W ReactNativeJS: receiveComponent@http://10.0.2.2:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:18481:21
10-16 14:02:34.507 10161 10205 W ReactNativeJS: receiveComponent@http://10.0.2.2:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:16656:34
10-16 14:02:34.507 10161 10205 W ReactNativeJS: _updateRenderedComponent@http://10.0.2.2:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:18688:33
10-16 14:02:34.507 10161 10205 W ReactNativeJS: _performComponentUpdate@http://10.0.2.2:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:18658:30
10-16 14:02:34.507 10161 10205 W ReactNativeJS: updateComponent@http://10.0.2.2:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:18579:29
10-16 14:02:34.507 10161 10205 W ReactNativeJS: receiveComponent@http://10.0.2.2:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:18481:21
10-16 14:02:34.507 10161 10205 W ReactNativeJS: receiveComponent@http://10.0.2.2:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:16656:34
10-16 14:02:34.507 10161 10205 W ReactNativeJS: _updateRenderedComponent@http://10.0.2.2:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:18688:33
10-16 14:02:34.507 10161 10205 W ReactNativeJS: _performComponentUpdate@http://10.0.2.2:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:18658:30
10-16 14:02:34.507 10161 10205 W ReactNativeJS: updateComponent@http://10.0.2.2:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:18579:29
10-16 14:02:34.507 10161 10205 W ReactNativeJS: performUpdateIfNecessary@http://10.0.2.2:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:18495:21
10-16 14:02:34.507 10161 10205 W ReactNativeJS: performUpdateIfNecessary@http://10.0.2.2:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:16688:42
10-16 14:02:34.507 10161 10205 W ReactNativeJS: runBatchedUpdates@http://10.0.2.2:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:16299:41
10-16 14:02:34.507 10161 10205 W ReactNativeJS: perform@http://10.0.2.2:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:17035:16
10-16 14:02:34.507 10161 10205 W ReactNativeJS: perform@http://10.0.2.2:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:17035:16
10-16 14:02:34.507 10161 10205 W ReactNativeJS: perform@http://10.0.2.2:8081/index.android.bundle?platform=android&dev=true&hot=false&m
10-16 14:02:34.527 10161 10205 W ReactNativeJS: Warning: performUpdateIfNecessary: Unexpected batch number (current 17, pending 15)
10-16 14:02:34.800 10161 10205 W ReactNativeJS: Warning: performUpdateIfNecessary: Unexpected batch number (current 21, pending 15)
10-16 14:02:34.801 10161 10205 W ReactNativeJS: Warning: performUpdateIfNecessary: Unexpected batch number (current 22, pending 20)
10-16 14:02:34.905 10161 10205 W ReactNativeJS: Warning: performUpdateIfNecessary: Unexpected batch number (current 26, pending 15)
10-16 14:02:34.908 10161 10205 W ReactNativeJS: Warning: performUpdateIfNecessary: Unexpected batch number (current 27, pending 20)
10-16 14:02:35.191 10161 10205 W ReactNativeJS: Warning: performUpdateIfNecessary: Unexpected batch number (current 31, pending 15)
10-16 14:02:35.191 10161 10205 W ReactNativeJS: Warning: performUpdateIfNecessary: Unexpected batch number (current 32, pending 20)
10-16 14:02:35.192 10161 10205 W ReactNativeJS: Warning: performUpdateIfNecessary: Unexpected batch number (current 33, pending 30)

我正在使用

  • 反应 15.3.2
  • 反应原生 0.35.0
  • 反应原生元素 0.6.2

我的问题有两个：如何解决正在发生的事情（render()例如，为什么我的方法没有被调用）以及我在这里做错了什么？

4

2 回答 2

4

原来，实际的解决方案不是使用ListViewor List。内部的一些日志记录语句render()导致render()方法失败 - 静默。然后 RN 尝试重新渲染组件，这导致问题中所示的日志消息不断重新出现，直到应用程序被终止。

于 2016-10-19T19:58:17.420 回答
1

我怎样才能解决正在发生的事情（例如，为什么我的 render() 方法没有被调用）

使用console.debug(msg)or等​​在您的代码中记录消息，然后通过在您的终端上运行您的项目文件夹中的 Android 或iOSconsole.error(msg)查看控制台日志。react-native log-androidreact-native log-ios

我在这里做错了什么？

您的代码中有两个问题。首先，cloneRowsWithData正如文档所述，不会克隆此数据源中的数据。它只是将构造时定义的函数传递给具有指定数据的新数据源。因此，您需要将此函数的结果分配给另一个变量。其次，国家是一个对象。您定义ds但未分配它。所以你需要做的是：

constructor(props) {
    super(props);

    const ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 });
    this.state = { dataSource: ds.cloneWithRows(this.props.myItems) };
}

然后在您render()将 ListView 的dataSource道具更改为：

dataSource={ this.state.dataSource }

于 2016-10-16T21:39:52.947 回答