Question

我在本机反应项目中使用ReactNavigation库，自从6小时后我尝试从一个屏幕导航到其他屏幕并尝试了所有可能的方式，但我认为我无法获得逻辑正常。这是我的项目结构。

我这样做的方式。

const AppStack = StackNavigator({ Main: Feeds });
const AuthStack = StackNavigator({ Launch: LaunchScreen, });

export default SwitchNavigator({
  Auth: AuthStack,
  App: AppStack
});

在我的LaunchScreen.js

中

const SimpleTabs = TabNavigator(
  {
    Login: {
      screen: Login,
      path: ""
    },
    SignUp: {
      screen: SignUp,
      path: "doctor"
    }
  },
);

<SimpleTabs screenProps={{rootNavigation : this.props.navigation  }}/>

但问题出在我的LaunchScreen组件中有一个TabNavigator，它包含我的另外两个组件Login.js和SignUp.js，但我的Login.js中的按钮并没有将它导航到Feed.js。

当您点击按钮时，会执行此操作。

signInAsync = async () => {
    await AsyncStorage.setItem('userToken', 'abc');
    this.props.navigation.navigate('Main');
    console.log("AAAAAsSSS");
  };

我的 LaunchScreen.js 包含 TabNavigation ，可让您在两个组件之间滑动，即。 Login.js 和 SignUp.js 。

现在，当您点击 Login.js 组件中的“登录”按钮时，它将对用户进行身份验证，并切换整个 LauchScreen.js 包含 Feed.js 组件的组件。

我是一个反应原生的菜鸟。

Answer 1

您可以使用react-native-router-flux (npm install --save react-native-router-flux)

只需创建一个Navigator.js文件并定义您想要导航的每个页面。

import React from 'react';
import { Router, Scene } from 'react-native-router-flux';

import LaunchScreen from '../components/LaunchScreen.js';
import Feed from '../components/Feed.js';


const Navigator = () => {
  return (
    <Router>
      <Scene key="root">
        <Scene key="lauchscreen" component={LaunchScreen} hideNavBar initial /> 
        <Scene key="feedscreen" type="reset" hideNavBar component={Feed} />
      </Scene>
    </Router>
  );
};

export default Navigator;

现在在你的App.js文件中添加：

import Navigator from './src/Navigator.js';

export default class App extends Component<Props> {
render() {
    return (
          <Navigator />
    );
  }
}

现在在你的login.js中点击登录按钮时写下：

import { Actions } from 'react-native-router-flux';

  onLoginClick() {
    Actions.feedscreen();
  }

多数民众赞成...快乐的编码。

Answer 2

如果您要导航到Feeds.js，请导航为 this.props.navigation.navigate('App');

不是

this.props.navigation.navigate('Main');

因为你的

export default SwitchNavigator({
  Auth: AuthStack,
  App: AppStack // here is your stack of Main
});

参考example

Answer 3

几个月前我遇到过同样的问题。感谢上帝你花了6个小时，我差不多花了大约4天时间为它寻找解决方案。

来到这个问题，请注意，在react-navigation中你可以导航到兄弟姐妹或儿童课程。

所以在这里，你有一个包含2个堆栈导航器的swtichNavigator（比如堆栈1和堆栈2），stack1有feed，stack2有一个带登录和注册的tab导航器。

现在您要从login.js导航到feeds.js（例如文件名是feeds.js）。如前所述，您无法导航回父母或祖父母。那么如何解决这个问题？

在本地反应中，您有权将params（screenprops）从父级传递给子级。使用此方法，您需要将{1}}的launchScreen存储到变量中并将其传递给tab / login（检查树结构）。现在在login.js中使用此变量进行导航。

您只是将导航权限从父级传递给子级。

在这里编辑：

this.props.navigation

这里，InnerTab是标签导航器。

<InnerTab screenProps={{rootNavigation : this.props.navigation  }} />

}，

在登录类中，使用export const InnerTab = TabNavigator({ login: { screen: login, }, }, signup: { screen: signup, }, }, 现在您可以使用变量const { navigate } = this.props.screenProps.rootNavigation;。

我知道它有点难以理解，但我已经尝试过并且有效。

如何在React-Native中导航？

3 个答案: