作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
一旦我删除用户 token ,用户就会重定向到登录页面。但是如果我用其他用户登录,主页仍然显示以前的用户信息。
这是因为我没有刷新主页。如何在react-navigation中手动重新初始化(?)主页?
MainPage(Logged in as 'matt') -> Logout -> LoginPage
-> (here I want to refresh MainPage so it can be loaded once new user login)
-> MainPage(Should be logged in as other user 'kobe')
MainPage通过componentWillMount接收用户JSON数据
componentWillMount() {
// retrieve user data
this.props.retrieveCurrentUser(this.props.token);
}
<小时/>
以防万一您需要我的代码...
1) 这是根导航
const RootTabNavigator = TabNavigator ({
Auth: {
screen: AuthStackNavigator,
},
Welcome: {
screen: WelcomeScreen,
},
Main: {
screen: MainTabNavigator,
},
}, {
2) 这是Auth Stack Navigator(登录页面)
export default StackNavigator ({
Autho: {
screen: AuthScreen,
},
SignUp: {
screen: SignUpScreen,
},
SignUpBio: {
screen: SignUpUserBioScreen,
},
SignUpUsername: {
screen: SignUpUsernameScreen,
},
}, {
header: null,
headerMode: 'none',
navigationOptions: {
header: null
},
lazy: true
});
3)这是主选项卡导航器
export default TabNavigator(
{
Feed: {
screen: FeedScreen,
},
Stylebook: {
screen: StylebookScreen,
},
Wardrobe: {
screen: WardrobeScreen,
},
Noti: {
screen: NotificationScreen,
},
Menu: {
screen: MenuScreen,
},
}, {
...
}
最佳答案
如果您使用 Flux 或 Redux 来管理您的状态,那么您可以在商店中更新您的新状态(例如新用户名和任何其他数据更改),并且所有内容都会更新。
如果您不使用状态管理解决方案,那么您可以 pass parameters in the navigate
function 。因此,当您登录后导航到主页时,请传递一个标志或其他内容,让主页知道它需要更新。
这是链接文档中的示例:
class HomeScreen extends React.Component {
static navigationOptions = {
title: 'Welcome',
};
render() {
const { navigate } = this.props.navigation;
return (
<View>
<Text>Hello, Chat App!</Text>
<Button
onPress={() => navigate('Chat', { user: 'Lucy' })}
title="Chat with Lucy"
/>
</View>
);
}
}
class ChatScreen extends React.Component {
// Nav options can be defined as a function of the screen's props:
static navigationOptions = ({ navigation }) => ({
title: `Chat with ${navigation.state.params.user}`,
});
render() {
// The screen's current route is passed in to `props.navigation.state`:
const { params } = this.props.navigation.state;
return (
<View>
<Text>Chat with {params.user}</Text>
</View>
);
}
}
就您而言,当您导航到主页时:
navigate('MainPage', { token: '<new token>' })}
在主页中:
componentWillReceiveProps(nextProps) {
if (nextProps.navigation.state.params.token) {
this.props.retrieveCurrentUser(this.props.token);
}
}
关于reactjs - 如何在 React Navigation 中刷新,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46088695/
我是一名优秀的程序员,十分优秀!