JavaScriptクラス間のネイティブ変数に反応する

Question

反応ナビゲーションを使用してナビゲーションアクションを設定しようとしていますが、フラットリストと純粋なコンポーネントを使用してリスト内のアイテムをレンダリングしているので問題があります。リストはうまく描画されますが、TouchableHighlightにonPress関数を追加しようとすると、ナビゲート変数が何を意味するのかわからないため、通常のナビゲーション関数を呼び出すことができません。可能であれば、別のクラスに移動するのではなく、純粋なコンポーネント用に別々のファイルを保存したいと思います。

ピュアコンポーネント：

export default class Lot extends React.PureComponent { 

    render() { 
     return (
      <TouchableHighlight 
       onPress={() => navigate('LotView')} 
      > 
       <View style={{ flex: 1, height: 150, alignItems: 'center', justifyContent: 'center' }}> 
        <View> 
         {this.props.active && (<Image source={images[this.props.index]} style={[styles.images]} />)} 
        </View> 

       </View> 

      </TouchableHighlight> 
     ); 
    } 
} 

次は私のApp.jsクラスです。

FlatList

<FlatList 
    data={this.state.lots} 
    renderItem={({ item }) => <Lot {...item} />} 
/> 

ナビゲーション画面

export const MyApp = StackNavigator({ 
    Home: { screen: HomeScreen }, 
    LotView: { screen: LotView }, 
}); 

Answer 1

ロットダミー部品であるべきである（任意の外部アクセスを持つべきではない）

export default class Lot extends React.PureComponent { 

    render() { 
     return (
      <TouchableHighlight 
       onPress={this.props.onPress} // <== CHANGED 
      > 
       <View style={{ flex: 1, height: 150, alignItems: 'center', justifyContent: 'center' }}> 
        <View> 
         {this.props.active && (<Image source={images[this.props.index]} style={[styles.images]} />)} 
        </View> 

       </View> 

      </TouchableHighlight> 
     ); 
    } 
} 

ホーム画面

<FlatList 
    data={this.state.lots} 
    renderItem={({ item }) => <Lot {...item} onPress={() => this.props.navigate('LotView')} />} //<== CHANGED 
/>