如何在React-Native中导航？-Java 学习之路

我在我的react-native项目中使用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 组件中的“登录”按钮时，它将对用户进行身份验证，并使用 Feed.js 组件 switch 整个 LauchScreen.js 组件 .

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

3 回答

你可以使用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();
  }

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

回复于 2024-05-05T21:23:09+08:00

0
如果要导航到 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
回复于 2024-05-05T21:23:09+08:00
0
几个月前我遇到了同样的问题 . 感谢上帝你花了6个小时，我差不多花了大约4天时间为它寻找解决方案 .

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

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

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

在本机反应中，您有权将params（screenprops）从父级传递给子级 . 使用此方法，您需要将 this.props.navigation 的launchScreen存储到变量中并将其传递给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 .

我知道它有点难以理解，但我已经尝试过并且有效 .
回复于 2024-05-05T21:23:09+08:00

如何在React-Native中导航？

3 回答

相关问题