Je suis en train de configurer une application qui utilise react-native-navigation . Il y a certaines valeurs que je voudrais conserver tout au long de la navigation. Lorsque je déclenche manuellement la navigation, je peux les transmettre en tant que paramètres dans l'appel à naviguer . Mais lorsque j'utilise la navigation native fournie par le plug-in, je ne peux pas le définir comme paramètre.
Quelle serait la meilleure façon de partager un jeton API sur l'ensemble de mon application, sans qu'il soit nécessaire de le stocker dans AsyncStorage? Est-ce qu'il me manque une solution évidente?
Mon App.js:
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}
})
});
La pile Auth s'occupe de l'authentification, après l'acquisition du jeton API , Je redirige manuellement vers l'application en utilisant cette approche:
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"
}
)
);
Le problème se produit lorsque je commence à naviguer avec le Nav du bas, car cela est géré par le plugin, il semble pas de paramètres persistants.
3 Réponses :
Utilisez React-Redux, Redux pour créer un magasin centralisé au niveau de l'application. Une fois que l'utilisateur s'est connecté avec succès, enregistrez le jeton en magasin et vous pouvez l'appeler et utiliser cette valeur d'état tout au long de l'application dans n'importe quel composant de votre choix. Visitez https://redux.js.org également Visitez https: // medium. com/@aurelie.lebec/redux-and-react-native-simple-login-example-flow-c4874cf91dde
J'ai lu sur Redux, mais cela semble excessif pour un cas d'utilisation très simple. Dois-je revenir à AsyncStorage?
redux est la meilleure approche pour maintenir un magasin centralisé, mais vous pouvez également utiliser AsyncStorage pour une application à petite échelle et n'oubliez pas de maintenir des scénarios de rappel sinon cela ne fonctionnera pas efficacement
Si vous ne souhaitez stocker que des données statiques simples, vous pouvez créer une variable statique disponible partout dans l'application.
export static var authToken = "your token"
Il vous suffit alors de l'importer lorsque vous en avez besoin. p>
C'est un jeton dynamique, issu d'un appel API.
Donc, je sais que Redux a été acheté - mais je vais donner mes 2 pence ici.
< gagnantPour
Dans votre application, vous souhaitez déterminer la complexité de votre état. Dans le commentaire d'un article, je vois que vous voyez Redux comme «exagéré» - au début, cela peut sembler comme ceci parce que vous n'avez besoin d'utiliser un état global qu'une seule fois (pour le moment).
La question que vous devez vous poser est la suivante: quelle sera la taille de ma candidature? Si vous créez une application qui appelle simplement une API, alors je suppose que ce serait le cas! Mais je suppose que votre application est plus complexe.
Lorsque vous commencez à travailler avec l'état, redux est un excellent moyen de comprendre et de contrôler de manière prévisible cet état ainsi que d'y accéder globalement. Donc, si cela vous fera gagner des heures sur toute la ligne (plutôt que de passer l'état local comme accessoire), je le ferais.
Docs: https://redux.js.org/introduction/getting-started
Contre
De toute évidence, si vous le jugez excessif, vous pouvez utiliser une solution alternative comme Async Storage. N'oubliez pas que ce n'est pas sécurisé et que vous ne devez donc pas stocker de données sensibles.
Le stockage asynchrone de React Native est-il sécurisé?
Autres types de stockage
Vous pouvez utiliser d'autres types de stockage pour votre application, généralement d'autres types de stockage DB.
https://dev.to/purvak_pathak / the-database-selection-guide-for-react-native-3kfm
Ils comprennent:
Considérez-vous un jeton API comme sensible, dans le sens où il peut être volé à l'aide d'AsyncStorage?
Jetez un coup d'œil ici: stackoverflow.com/questions / 39028755 /…
Excellent ajout! Donc AsyncStorage semble bien pour mon cas d'utilisation spécifique. Merci, marqué le vôtre comme la solution.