如果未将var设置为redux状态，则导航。
如果未将var设置为redux状态，则导航。
提问于 2019-06-04 16:01:30
我在做一些连接/铭文的屏幕。我有一个最下面的标签按钮。目标是，如果用户点击它，它将显示他的前页，如果他是连接(我正在设置一个用户在我的redux商店)，或显示一个登陆屏幕与登录按钮和订阅按钮，如果他不是。
如果redux商店是空的，每次用户单击我的底部选项卡栏上的"Profil“时，我如何导航到这个登陆页面？
这是我的密码：
// Screens / Profil.js
import React from "react";
import { StyleSheet, View, Text, Button } from "react-native";
import { color } from "../constants/color";
import { connect } from "react-redux";
/*
* Class Profil
* Appears when the users click on the profil button in the bottom tab bar
* Return JSX component
*/
class Profil extends React.Component {
constructor(props) {
super(props);
}
// This is what I have tried so far
componentWillMount() {
if (this.props.currentUser == null) {
this.props.navigation.navigate("Landing");
}
}
/*
* Render the page
* @param null
* @return JSX component
*/
render() {
const { currentUser } = this.props;
console.log(currentUser);
if (currentUser == null) {
return (
<View style={styles.mainContainer}>
<Text>You are not connected</Text>
</View>
);
} else {
return (
<View style={styles.mainContainer}>
<Text>Welcome {currentUser.user.username}</Text>
<Button title="Déconnexion" onPress={this._disconnection} />
</View>
);
}
return null;
}
}
const styles = StyleSheet.create({
mainContainer: {
flex: 1,
backgroundColor: color.whisper
}
});
const mapStateToProps = state => {
return {
currentUser: state.connection.currentUser
};
};
export default connect(mapStateToProps)(Profil);因此，当我第一次点击我的协议时，它在我的登陆页面上进行得很好：
但是，如果我再次单击Profil，它将不会显示我的登陆页面：
我想这是因为组件本身并没有改版。如何根据redux状态var处理常量重定向？
更新:我的堆栈导航器
const ProfilStackNavigator = createStackNavigator({
Profil: {
screen: Profil,
navigationOptions: {
title: "Profil"
}
},
Landing: {
screen: Landing,
headerMode: "none",
navigationOptions: {
header: null
}
},
SignUp: {
screen: SignUp,
navigationOptions: {
title: "Inscription"
}
},
SignIn: {
screen: SignIn,
navigationOptions: {
title: "Connection"
}
}
});回答 2
Stack Overflow用户
回答已采纳
发布于 2019-06-04 18:48:55
我认为您有两个解决方案，第一个是使用NavigationEvents，第二个是navigationOptions。
First option，将didFocus侦听器添加到您的profile组件中，当profile选项卡聚焦时，它将被触发。
class Profil extends React.Component {
subscribe = null;
constructor(props){}
focused = () => {
if (this.props.currentUser == null) {
this.props.navigation.navigate('Landing');
}
};
componentDidMount = () => {
this.subscribe = this.props.navigation.addListener('didFocus', this.focused);
};
componentWillUnmount() {
this.subscribe && this.subscribe.remove();
this.subscribe = null;
}
render() {
...
}
}第二个选项，使用navigationOptions add tabBarOnPress，单击选项卡后会触发该选项卡。
Profil: {
screen: ProfilStackNavigator,
navigationOptions: {
tabBarLabel: 'Profil',
tabBarOnPress: ({ navigation, defaultHandler }) => {
// console.log('Pressed');
defaultHandler();
},
},
},Stack Overflow用户
发布于 2019-06-04 17:09:49
我成功地做到了这一点。你有正确的想法。
也许您的导航对象是问题所在？
下面是我为带有React/Redux/3的三维地震可视化器编写的一个示例。我将历史对象作为支柱传递给我的组件，并使用它动态更改路由。(不包括在示例中)
我建议确保您的路由器API是正确的，然后登录状态将挂载生命周期。
我希望这是有帮助的。祝你好运！)
const mapStateToProps = state => {
return {
...
quakes: state.viz.quakes,
...
};
};
componentDidMount(){
// if data hasn't download redirect to splash
if (this.props.quakes[this.props.feedIndex].length === 0) {
this.props.history.push("/");
}
...
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56447510
复制相关文章
相似问题
腾讯云开发者
