问如果未将var设置为redux状态，则导航。
EN

Stack Overflow用户

提问于 2019-06-04 08:01:30

回答 2查看 157关注 0票数 1

我在做一些连接/铭文的屏幕。我有一个最下面的标签按钮。目标是，如果用户点击它，它将显示他的前页，如果他是连接(我正在设置一个用户在我的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"
    }
  }
});

react-native

redux

react-navigation

javascript

回答 2

Stack Overflow用户

回答已采纳

发布于 2019-06-04 10: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();
    },
  },
},

票数 2

Stack Overflow用户

发布于 2019-06-04 09: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("/"); 
   }
   ...
}