将参数传递给嵌套的React导航状态
将参数传递给嵌套的React导航状态
提问于 2018-06-09 04:05:25
我的结构如下：
- Switch导航器
- 堆栈导航器
- LoginScreen
- Drawer导航器
- 堆栈导航器
- Stack navigator
- 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 {}有没有办法将参数向下传给子参数，或者访问父参数？或者还有其他方法吗？
回答 1
Stack Overflow用户
发布于 2018-06-09 08:21:29
离开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来存储您的用户凭据。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50767726
复制相关文章
相似问题