Передача параметров во вложенные состояния React Navigation

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(
      // ...
    )
  });
}

Это безопасный способ хранения конфиденциальной информации подробнее здесь .

Однако вы также можете использовать эту реагировать-нативную цепочку для ключей для хранения в ваших учетных данных пользователя.