组件之间的 React Native 中的导航器答案

【问题标题】：Navigator in React Native between components组件之间的 React Native 中的导航器
【发布时间】：2019-11-26 13:58:11
【问题描述】：

我想做一个简单的导航到另一个组件。我使用 createStackNavigator 进行了尝试，但不幸的是它不起作用。第一页是 App，第二页是 AppLoggedin。这是我的第一个 React Native 应用程序。然后我想稍后导航到信息和印象。你能帮我吗？

https://snack.expo.io/@knefie/outsource-neu

【问题讨论】：

请使用code将最重要的代码部分放在问题描述中，这将有助于人们更快地发现您的问题

标签： javascript react-native navigation

【解决方案1】：

     import {createStackNavigator} from 'react-navigation'
     import App from './App'
     import AppLoggedIn from './AppLoggedIn'

     const Stack = createStackNavigator(
     {
      App: {
          screen: App
      },
      AppLoggedIn:{
          screen:AppLoggedin

      },
      );

      export default Stack;

在你的 App.js 中放这个：

      import Stack from './stacknavigator'
      export default class App extends Component {
      render(
            <Stack>

         )
         }

在屏幕之间导航：

       this.props.navigation.navigate('App')

【讨论】：

【解决方案2】：

const switchNavigator = createSwitchNavigator({
  loginFlow: createStackNavigator({
    Signup: SignupScreen,
    Signin: SigninScreen
  }),
  mainFlow: createStackNavigator({
      Home: HomeScreen,
      Settings: SettingsScreen
    }),
  });
 export default createAppContainer(switchNavigator);

试试这样的。确保导入所有需要的内容，例如 AppContainer 和 Navigator。

当您完成导航设置后，您可以使用 Button 的 onPress 属性在屏幕之间导航：

在你的函数中使用如下：

<Button 
onPress={() => navigation.navigate('//The name of the screen where you want to navigate to. )>
</Button>

最后给你的函数导航道具； const NameOfYourScreen = (props) => { ... }

【讨论】：