React-Native StackNavigator

Question

Ok Jungs, also ich habe eine Frage, ich bin neu zu reagieren-native Entwicklung und bekam ein Problem mit einem StackNavigator. Wenn ich eine Taste drücken gemeint des aktuellen Bildschirms zu navigieren, es gibt mir eine Fehlermeldung wie diese: enter image description here

Dies ist der Code, den ich verwende, und ich kann es nicht bekommen,

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

    <Button 
     onPress={() => navigate('News')} 
     title="News" 
    /> 

    const NewsApp = StackNavigator({ 
    Home: { screen: Splash }, 
    News: { screen: News } 
    }); 

Answer 1

Innerhalb der render-Funktion müssen Sie Navigator wie folgt extrahieren:

render() 
{ 
    const { navigate } = this.props.navigation; 
    return (
    <Button 
     onPress={() => navigate('News')} 
     title="News" 
    /> 
) 
} 

mit Stack-Navigation Einstieg:

//First Screen 

     import { 
     StackNavigator, 
    } from 'react-navigation'; 
//Added screens to navigate.  
    const BasicApp = StackNavigator({ 
     Main: {screen: MainScreen}, 
     Profile: {screen: ProfileScreen}, 
    }); 
//Second screen (Main Screen) 
//This is a welcome screen which appears first in the route declared in the previous code 
    class MainScreen extends React.Component { 
     static navigationOptions = { 
     title: 'Welcome', 
     }; 
     render() { 
     //constant for navigation 
     const { navigate } = this.props.navigation; 
     return (
      <Button 
      title="Go to Jane's profile" 
      onPress={() => 
      navigate('Profile', { name: 'Jane' })//Navigate to Profile with name 
      } 
      /> 
     ); 
     } 
    } 

//Third screen (Profile screen) 

    class ProfileScreen extends React.Component { 
     static navigationOptions = ({navigation}) => ({ 
     title: navigation.state.params.name, //extracted name from the params 
     }); 
     render() { 
     const { goBack } = this.props.navigation;//used to goBack prop 
     return (
      <Button 
      title="Go back" 
      onPress={() => goBack()} 
      /> 
     ); 
     } 
    } 

Prost :)

Answer 2

Wenn Sie in der Tat von der Komponente zu navigieren versuchen Sie es in erstellt, werden Sie keinen Zugriff auf den Navigator haben, da es im Inneren NewsApp Navigation zu etwas spritzt nur.

Sie sollten mit dem Zurückdrücken innerhalb der obersten Komponente im Navigationsstapel umgehen. Wenn Sie jedoch die Kontrolle über die Navigation an Orten wie dem, den Sie haben, haben müssen, dann wäre vielleicht die Implementierung von Redux eine gute Lösung für Sie.