Question

我的结构如下：

切换导航器
- LoginScreen
- 抽屉导航器
  - 堆栈导航器
    - ListTasksScreen
  - 堆栈导航器
    - ListDirectivesScreen

应用程序从登录屏幕开始。登录成功后，我this.props.navigate()到ListTasksScreen并将凭据传递给它。

但是，当用户现在通过打开抽屉并按下某个项目来更改屏幕时，参数将丢失。如果没有凭据，我无法查询API。

代码：

export const app = createSwitchNavigator(
  {
    login: {screen: LoginScreen}, 
    main: {screen: MainScreen},
  },
  {initialRouteName: "login"}
)

export class LoginScreen extends React.Component {
  performLogin() {
    this.props.navigation.navigate(
      "listTasks",
      {api: this.api, userId: response.id}
    )
  }
}

export const MainScreen = createDrawerNavigator({
  listTasksStack: {screen: createStackNavigator({listTasks: ListTasksScreen})},
  listDirectivesStack: {screen: createStackNavigator({listDirectives: ListDirectivesScreen})},
  logout: {screen: LogoutScreen},
})

export class ListTasksScreen extends React.Component {
  doSomething() {
    this.props.navigation.getParam("api") // <-- Not available!
  }
}

export class ListDirectivesScreen extends React.Component {}
export class LogoutScreen extends React.Component {}

有没有办法将参数传递给子节点或访问父参数？还是有其他方法吗？

Answer 1

离开ListTasksScreen后，您无法访问凭据的原因是您的凭据是ListTasksScreen组件中的道具。

您可能需要其他内容在您的应用中存储用户凭据，并让react-navigation只处理导航。

一种简单的入门方式是使用AsyncStorage：

import { AsyncStorage } from 'react-native';
// ...

class LogInScreen extends React.Component {
   handleLogIn = () {
      this.logIn(token => {
        AsyncStorage.setItem('MyToken', token);
      });
    }
}

然后在您的其他屏幕中，您可以检索您的令牌：

getData = () => {
  AsyncStorage.getItem('MyToken').then(token => {
    const headers = { Authentication: `Bearer ${token}` };
    fetch('my-backend.com/api/data', { method: 'GET', headers }).then(
      // ...
    )
  });
}

这是存储敏感信息的安全方式read more here。

但是，您也可以使用此react-native-keychain存储在您的用户凭据中。

将参数传递给嵌套的React Navigation状态

1 个答案: