Question

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

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

我是对的，如何解决这个问题？

<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函数的第一个参数即可解决此问题。 e.g。

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

Answer 2

我们可以使用Webview添加标题吗？喜欢

render（）{// eslint-disable-line class-methods-use-this 回来（

  <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

2 个答案: