Совместное использование состояния в приложении React Native с помощью React Navigation

Question

Я настраиваю приложение, которое использует react-native-navigation. Есть некоторые значения, которые я бы хотел сохранить при навигации. Когда я вручную запускаю навигацию, я могу передать их как параметры в вызове на navigate. Но когда я использую встроенную навигацию, предоставляемую плагином, я не могу установить это как параметр.

Как лучше всего использовать API-токен для всего моего приложения без необходимости хранить его в AsyncStorage? Я упускаю какое-то очевидное решение?

My App.js:

const AppStack = createBottomTabNavigator({
  Members: createStackNavigator({
    MemberList: MemberList,
    AddMember: NewMember,
  },{
    mode: 'card',
    initialRouteName: "MemberList"
  }),
  Scan: Scanner
});
const AuthStack = createStackNavigator({ Login: Login });

export default createAppContainer(
  createSwitchNavigator(
    {
      AuthLoading: AuthLoadingScreen,
      App: AppStack,
      Auth: AuthStack
    },
    {
      initialRouteName: "AuthLoading"
    }
  )
);

Стек аутентификации заботится об аутентификации, после получения токена API я вручную перенаправляю в приложение, используя этот подход:

    this.props.navigation.navigate({
        routeName: 'App',
        params: { auth_token: data.auth_token },
        action:  this.props.navigation.navigate({
          routeName: 'MemberList',
          params: { auth_token: data.auth_token}
        })
      });

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

Answer 1

Если вы хотите хранить только простые статические данные, вы можете создать статическую переменную, доступную повсюду в приложении.

export static var authToken = "your token"

Тогда вам просто нужно импортировать его, когда вам это нужно.

Answer 2

Итак, я знаю, что Redux скуплен, но я собираюсь отдать свои 2 пенса здесь.

Для

В своем приложении вы хотите выяснить, насколько сложным станет ваше состояние. В комментарии к сообщению я вижу, что вы видите Redux как «излишнее» - на первый взгляд может показаться, что вам нужно использовать глобальное состояние только один раз (пока).

Вопрос, который вам нужно задать, заключается в следующем: насколько большим станет мое приложение? Если вы создаете приложение, которое просто вызывает API - тогда, я думаю, это будет! Но я предполагаю, что ваше приложение более сложное.

Когда вы начинаете работать с состоянием, redux - это отличный способ предсказывать и контролировать это состояние, а также обращаться к нему по всему миру. Так что, если это сэкономит вам часы на линии (вместо передачи местного состояния в качестве реквизита), я бы пошел на это.

Документы: https://redux.js.org/introduction/getting-started

Против

Очевидно, что если вы считаете это излишним, то вы можете использовать альтернативное решение, например Async Storage. Помните, что это небезопасно, и поэтому вы не должны хранить конфиденциальные данные.

Безопасно ли асинхронное хранилище React Native?

Другие виды хранения

Вы можете использовать другие типы хранилищ для вашего приложения, как правило, другие типы хранилищ БД.

https://dev.to/purvak_pathak/the-database-selection-guide-for-react-native-3kfm

Они включают в себя:

1. Realm
2. Firebase
3. SQLite
4. Основные данные
5. PouchDB
6. Async Storage (не полномасштабная база данных, но все еще довольно популярная)

Answer 3

Используйте React-Redux, Redux для создания централизованного хранилища на уровне приложений. Как только пользователь успешно войдет в систему, сохраните токен в хранилище, и вы сможете вызывать его и использовать это состояние Значение во всем приложении в любом компоненте, который вы хотите. Визит https://redux.js.org также Визит https://medium.com/@aurelie.lebec/redux-and-react-native-simple-login-example-flow-c4874cf91dde