React Native - Как обновить экран на уже смонтированном компоненте - PullRequest
Новая
       25

React Native - Как обновить экран на уже смонтированном компоненте

0 голосов
/ 27 ноября 2018

У меня есть 2 экрана:

  • Главный экран
  • Экран входа в систему

Моя точка входа - мой Главный экран, если я вошел в систему (извлечение данных), выйдите из системы, а затем войдите в другую учетную запись.Поскольку мой компонент Home уже смонтирован, мои данные не будут обновляться, и this.getDatas () больше не будет вызываться.Я не могу найти решения, думаю, мне нужно использовать «ComponentWillUpdate» в моем Home.js для вызова this.getDatas () или чего-то подобного, но вы не можете найти решение.

Вот мой код:

Home.js 

  componentDidMount = async () => {
    const { navigation } = this.props;
    if (!await AsyncStorage.getItem('auth')) {
      navigation.navigate('Login');
    } else {
      this.getDatas();
    }
  }

  getDatas() {
    axios.get(`${apiUrl}/me`).then((res) => {
      this.setState({
        datas: res.data.datas,
      });
    }).catch((err) => {
      console.warn(err);
    });
  }

Login.js 

export default class Login extends Component {
  constructor(props) {
    super(props);
    this.state = {
      email: null,
      password: null,
    };
  }

  logIn() {
    const { email, password } = this.state;
    axios.post(`${apiUrl}/auth`, {
      email,
      password
    }).then((res) => {
      navigation.navigate('Home');
    }).catch((err) => {
      console.warn('Error:', err);
    });
  }
}

App.js 

const MainNavigator = createStackNavigator({
  Home,
  CreateGame,
  GamePreview,
  CardSelection,
  BonusCard,
  Game,
  GameResult
}, { initialRouteName: 'Home', headerMode: 'none', });

const LoginNavigator = createStackNavigator({
  Login,
  Subscribe,
  SubscribeNext,
  ForgottenPassword,
}, { initialRouteName: 'Login', headerMode: 'none', });

const RootNavigator = createSwitchNavigator({
  AuthLoading: AuthLoadingScreen,
  LoginNavigator,
  MainNavigator
}, { initialRouteName: 'AuthLoading' });

export default class App extends Component {
  render() {
    return <RootNavigator />;
  }
}

Есть идеи?

1 Ответ

0 голосов
/ 27 ноября 2018

Вам следует рассмотреть возможность использования Switch Navigator с react-navigation для потоков аутентификации в вашем приложении.Поэтому, как только вы выйдете из своего приложения и войдете в систему при входе в систему, экран приложения выскочит из памяти, и, таким образом, при повторном входе в систему снова будет запущен componentDidmount.

...