Reagiere native verschachtelte Navigation - Navigationskontext holen

Question

Ich versuche einen einfachen verschachtelten Navigator zu erstellen, ein Tab Nav in einem Stack Nav. Ich bekomme "undefined ist kein Objekt, das this.props.navigation auswertet", wenn ich versuche, über "myFunction" unten zu stapeln. Ich habe einen anderen Ansatz versucht, nämlich die Stapelnavigation über das "headerright" der Navigationsoptionen zu implementieren - und es funktioniert. Aber ich würde es gerne über einen Button im Inhaltsbereich erreichen. Code ist unten, mit beiden Navigationsmethoden gezeigt:

importieren Reagieren, {Komponente} von 'reagieren'; import { AppRegistry, Text, Ansicht, Schaltfläche, Bild, StyleSheet } aus 'reactive-native'; importieren Sie {TabNavigator, StackNavigator} von "react-navigation";

class RecentChatsScreen extends React.Component { 

    static navigationOptions = ({ navigation }) => ({ 
    title: `Recent Chats`, 
    headerRight: <Button title="Go Chat" onPress={() => navigation.navigate('Chat', { user: 'Lucy' })}/>, 
    }); 

myFunction() { 
    const { navigate } = this.props.navigation; 
    navigate('Chat', { user: 'Lucy' }); 
} 

    render() { 

    return (
    <View> 
    <Text>List of recent chats</Text> 
    <Button 
      onPress={   
this.myFunction 
} 
      title="Go Chat." 
     /> 
     </View> 
     ); 
    } 
} 

class ChatScreen extends React.Component { 
    static navigationOptions = { 
    title: 'chat screen', 
    }; 

    render() { 
    return <Text>Chat screen</Text> 
    } 
} 

class AllContactsScreen extends React.Component { 
    render() { 
    return <Text>List of all contacts</Text> 
    } 
} 

const MainScreenNavigator = TabNavigator({ 
    Recent: { screen: RecentChatsScreen }, 
    All: { screen: AllContactsScreen }, 
}); 

MainScreenNavigator.navigationOptions = { 
    title: 'My Chats', 
}; 

const SimpleApp = StackNavigator({ 
    Home: { screen: MainScreenNavigator }, 
    Chat: { screen: ChatScreen }, 
}); 

AppRegistry.registerComponent('SimpleApp',() => SimpleApp); 

Answer 1

Sie haben vergessen, wahrscheinlich zu binden this, so dass, wenn myFunction seine nicht in Klasse RecentChatsScreen Umfang aufrufen.

hinzufügen Versuchen Sie, diese

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