リストビュー内をナビゲートするときの問題

私はRNの初心者です。この問題を解決する方法を探しています。私はネット上で多くの情報を見つけましたが、それでも動作しません。ここでリストビュー内をナビゲートするときの問題

は私の最初のコードは次のとおりです。

import { StackNavigator, NavigationActions } from 'react-navigation'; 
...

データソースからのListItemを移入するMy機能：

list(rowData, sectionID, rowID) { 
    var onPress =() => this.props.navigation.goBack(); 
    return (
    <ListItem thumbnail onPress={onPress}> 
     <Body> 
     <Text>{rowData.Title}</Text> 
     <Text numberOfLines={2}> 
      <Icon name="map-marker" size={15} color="grey" /> 
      {rowData.Address}, {rowData.City} ({rowData.Distance} km) 
     </Text> 
     <Text numberOfLines={3}>{rowData.Description}</Text> 
     </Body> 
     {VerifiedUser} 
    </ListItem> 
); 
}

たonPress行動は私にエラーメッセージを送信します。

未定義ですオブジェクトではありません（評価中 '_this2.props.navigation.goBack（）'

render() {   
    return( 
    <Container> 
     <View style={styles.fill}> 
     <ScrollView style={styles.fill}> 
      <View style={styles.scrollViewContent}> 
      <ListView 
       dataSource={this.state.dataSource} 
       renderRow={this.list.bind(this)} 
       enableEmptySections={true} 
      />  
      </View>  
     </ScrollView> 
     </View> 
    </Container> 
    ); 
}

コンポーネントが認識されていないようです。このエラーを理解する助けとなることはありますか？

ありがとうございました！

出典

2017-11-01 Mehmet Ait Addi

は 'リストです'使用されているコンポーネント内で定義された関数？ – Kraylog

Oups、はい、申し訳ありません。はい、それは..私はコードを更新しています –

私はListViewを使用していると仮定しており、listはrenderRowの機能です。 thisがバインドされていないために発生したエラーです。 React Documentation for Handling Eventsについて詳しく読むことができます。

thisを使用するように関数をバインドする必要があります。いくつかのオプションがあります。

最初のオプションは、インラインそれをバインドすることです

<ListView renderRow={this.list.bind(this)} />

目のオプションは、コンストラクタで結合され、

class SomeComponent extends React.Component { 
    constructor(props) { 
    super(props); 
    this.list = this.list.bind(this); 
    } 

    list(rowData, sectionID, rowID) { 
    // ... 
    } 

    render() { 
    return(<ListView renderRow={this.list} />) 
    } 
}

第三の選択肢は、矢印の機能を使用している、

class SomeComponent extends React.Component { 
    list = (rowData, sectionID, rowID) => { 
    // ... 
    } 

    render() { 
    return(<ListView renderRow={this.list} />) 
    } 
}

出典

2017-11-01 13:11:26 bennygenel

ご覧のとおり、私はすでにあなたのコメントに答えました。この問題は「バインド」とは関係ありませんが、ナビゲートコンポーネントをRenderRowに渡す方法 –

@MehmetAitAddi質問に答えたときに、リスト機能をどのように使用したかについての部分はありませんでした – bennygenel

申し訳ありませんが、あなたの提案:)その男のために申し訳ありません –

リストビュー内をナビゲートするときの問題

答えて

関連する問題