画面の変更FlatList onPress

Question

私は2つの画面を持っています。 最初の画面はHomeScreen、2番目の画面はProfileScreenです。 私はHomeScreenでFlatListを使用しました。私は別の画面に移動するためにプッシュしたいと思います。あなたが実装にthisのコンテキストを失っていること

class ProfileScreen extends Component { 

    static navigationOptions = { 
     title: 'Profile', 
    }; 

    render() { 
     const { navigate } = props.navigation; 

     return <Text>Hello, I am profile!</Text>; 
    } 
} 




class HomeScreen extends Component { 

    static navigationOptions = { 
     title: 'Home', 
    }; 


    constructor(props) { 
     super(props); 

     this.state = { 
      data: [], 

     }; 


    } 

    getScreen() { 
     this.props.navigation.navigate('Profile') 
    } 

    render() { 

     return (
      <View> 
       <FlatList 
        data={this.state.data} 
        renderItem={({ item }) => (
         <TouchableHighlight underlayColor= 'transparent' onPress= {this.getScreen}> 
          <View style= {{width: 300, height: 'auto'}} > 
          <Text> {item.title} </Text> 
           <View style= {{width: 300, height: 1, backgroundColor: 'red', marginBottom: 30, marginTop: 15}} /> 
          </View> 
         </TouchableHighlight> 
        )} 
       /> 
      </View> 
     ); 
    } 
} 



const AppNavigator = StackNavigator({ 
    Home: { screen: HomeScreen }, 
    Profile: { screen: ProfileScreen } 
}); 

Answer 1

よう

コード「はundefinedプロパティを読むと 『移動』することはできません」：私はcodesことを使用whenしかし、私はそのエラーメッセージを見ました。関数呼び出しでそれを修正：あなたのgetScreenメソッドにこれをバインドするコンストラクタの内部

const { navigate } = this.props.navigation; 

navigate('Profile'); 

Answer 2

：また

renderItem={({ item }) => (
    <TouchableHighlight underlayColor='transparent' onPress={() => this.getScreen()}> 
    ... 
    </TouchableHighlight> 
)} 

、あなたはパターンを使用することができます。

コンストラクタ内に次の行を追加するだけです。

this.getScreen = this.getScreen.bind（this）;