Перейдите, если мой вар не установлен в моем состоянии редукса - PullRequest
Новая
       41

Перейдите, если мой вар не установлен в моем состоянии редукса

1 голос
/ 04 июня 2019

Я делаю экраны SOMME подключения / надписи.У меня есть кнопка нижней вкладки профиля.Цель состоит в том, чтобы, если пользователь щелкнул по нему, он либо покажет свою страницу профиля, если он подключен (я настраиваю пользователя в моем магазине редуксов), либо покажет экран Landing с кнопкой входа в систему и кнопкой подписки, если он не подключен..

Как я могу переходить на эту целевую страницу каждый раз, когда пользователь нажимает «Профиль» на моей нижней панели вкладок, если хранилище редуксов пусто?

Вот мой код профиля: 

// 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);

Поэтому, когда я впервые нажимаю на свой профиль, он хорошо отображается на моей целевой странице:

Landing Page

Но если я снова нажму наПрофиль, он не показывает мою целевую страницу:

This is not supposed to show

Я думаю, это потому, что компонент не перерисовал себя.Как я могу обработать постоянное перенаправление в соответствии с моим состоянием редукса?

ОБНОВЛЕНИЕ: Навигатор моего стека 

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 ]

2 голосов
/ 04 июня 2019

Я думаю, у вас есть два варианта решения этой проблемы: первая использует NavigationEvents , а вторая - navigationOptions

Первая опция , добавьте didFocus слушателя к компоненту вашего профиля, который будет срабатывать при фокусировке вкладки профиля. 

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();
    },
  },
},
0 голосов
/ 04 июня 2019

Я успешно сделал это.У вас правильная идея.

Возможно, проблема связана с вашим навигационным объектом?

Вот пример, который я написал для трехмерного визуализатора землетрясения с помощью React / Redux / Three.Я передал объект истории как опору своим компонентам и использовал это для динамического изменения маршрутизации.(не включен в пример)

Я бы посоветовал убедиться в правильности 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("/"); 
   }
   ...
}
...