如何在 React-Native 中导航？

Question

我在我的 react-native 项目中使用 ReactNavigation 库，从 6 小时开始，我试图从一个屏幕导航到另一个屏幕，并尝试了所有可能的方法，但我认为我无法正确获取逻辑。 这是我的项目结构。

Here

我的做法。

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 组件。

我是 react-native 的菜鸟。

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 中，您可以导航到同级或子类。

所以在这里，您有一个 swtichNavigator，其中包含 2 个堆栈导航器（例如堆栈 1 和堆栈 2），堆栈 1 有提要，堆栈 2 有一个带有登录和注册的选项卡导航器。

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

在 react native 中，您有权将参数（screenprops）从父级传递给子级。使用它，您需要将 launchScreen 的this.props.navigation 存储到一个变量中并将其传递给 tab/login（检查树结构）。现在在 login.js 中使用这个变量来导航。

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

在这里编辑：

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

这里，InnerTab 是标签导航器。

export const InnerTab = TabNavigator({
login: {
    screen: login,
    },
},
signup: {
    screen: signup,
    },
},

},

在登录类中，使用const { navigate } = this.props.screenProps.rootNavigation; 现在您可以使用变量navigate。

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