TouchableOpacity onPress 挂在 ListView 内

Question

我有这个 ListView UI，当我在 TouchableOpacity 的 onPress 事件处理程序中添加 rowData 参数后，它开始运行缓慢。按下 TouchableOpacity 后，它会保持按下 15 秒，然后再次平滑运行s。

好像有一些冲突，因为我在上面三行的ListView的renderRow事件处理程序中也使用了rowData。

我说得对吗？如何解决这个问题？

<ListView
    dataSource={this.state.dataSource}
    keyboardShouldPersistTaps={true}
    renderRow={(rowData) =>
        <TouchableOpacity
            onPress={(rowData) => {
                console.log(rowData);//ON THIS LINE IT HANGS 15s
            }}
        >
            <Text>{rowData}</Text>
        </TouchableOpacity>
    }
    automaticallyAdjustContentInsets={false}
/>

Answer 1

我真的很想知道是什么让 javascript 中的这个操作如此昂贵，但问题是你将 rowData 作为参数传递给你的 onPress 函数，当 rowData 已经在上层作用域 (renderRow) 中声明时。所以是的，就像你说的，有碰撞。

实际上，rowData 的值正在被 onPress 重新定义，因为 onPress 函数接收触摸事件作为参数。（您会注意到记录的数据实际上不是您的原始行数据，而是触摸事件对象）。

您只需重命名 onPress 函数的第一个参数即可解决此问题。例如

 <TouchableOpacity
       onPress={(evt) => {
         console.log(rowData); //now it doesn't hang
       }}
 >

Answer 2

我们可以将页眉与 Webview 放在一起吗？喜欢

render() { // eslint-disable-line class-methods-use-this return（

  <Container theme={theme} style={{ backgroundColor: theme.defaultBackgroundColor }}>
    <Header style={{ justifyContent: 'flex-start', paddingTop: (Platform.OS === 'ios') ? 23 : 9 }}>
      <Button transparent onPress={() => this.popRoute()} >
       <Icon name="ios-arrow-round-back-outline" style={{ fontSize: 30, lineHeight: 32, paddingRight: 10 }} />
        Find Stores
      </Button>
   </Header>

  <WebView
      ref={WEBVIEW_REF}
      automaticallyAdjustContentInsets={false}
      source={{uri: this.state.url}}
      javaScriptEnabled={true}
      domStorageEnabled={true}
      decelerationRate="normal"
      onNavigationStateChange={this.onNavigationStateChange}
      onShouldStartLoadWithRequest={this.onShouldStartLoadWithRequest}
      startInLoadingState={true}
      scalesPageToFit={this.state.scalesPageToFit}
    />

  </Container>
);

TouchableOpacity onPress 挂在 ListView 内

TouchableOpacity onPress hangs inside ListView

javascript

listview

reactjs

react-native

react-native-listview