我的结构如下:
- 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 {}
有没有办法将参数向下传给子参数,或者访问父参数?或者还有其他方法吗?
发布于 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来存储您的用户凭据。
https://stackoverflow.com/questions/50767726
复制相似问题