TouchableOpacity onPressがListView内でハングする

Question

TouchableOpacityのonPressイベントハンドラ内にrowDataパラメータを追加した後、このリストビューUIがゆっくり実行され始めました。 TouchableOpacityが一度押されると、15秒間押し続けられた後、再び滑らかに実行されます。

私は上記の3行目の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）にあります。そう、はい、あなたが言ったように、衝突があります。

onPress関数がタッチイベントを引数として受け取るので、実際には、の値がonPressによって再定義されています。 （記録されるデータは、実際には元の行データではなく、タッチイベントオブジェクトであることがわかります）。

これを修正するには、onPress関数の最初の引数の名前を変更するだけです。例えば

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

Answer 2

Webviewでヘッダーを挿入できますか？以下のような

は（）{// eslintディセーブルラインクラスのメソッド使用-この リターン（

<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> 
);