React Native code ведет себя иначе на симуляторе iPhone X - PullRequest
Новая
       39

React Native code ведет себя иначе на симуляторе iPhone X

0 голосов
/ 26 декабря 2018

Я использую реагирующую навигацию 2 с React native для создания потока аутентификации (после этого учебное пособие ).

Приложение работает нормально, когда я запускаю его в симуляторе iPhone 6s.Приложение перенаправляет меня на экран приветствия, поскольку userToken не найден в AsyncStorage .

Мой код следующий:

AuthLoadingScreen.js 

import React from 'react'
import {
  StyleSheet,
  View,
  ActivityIndicator,
  AsyncStorage,
} from 'react-native'


export default class AuthLoadingScreen extends React.Component {
  constructor() {
    super()
    this.loadApp()
  }
  // Remember logged in user
  loadApp = async () => {
    const userToken = await AsyncStorage.getItem('userToken')
    this.props.navigation.navigate(userToken ? 'App' : 'Auth')
  }
  render() {
    return (
      <View style={styles.container}>
        <ActivityIndicator size="large" color="#fff" />
      </View>     
    )
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#aa73b7',
    alignItems: 'center',
    justifyContent: 'center',
  },
})

WelcomeScreen.js 

import React from 'react'
import {
  StyleSheet,
  View,
  Text,
} from 'react-native'


export default class WelcomeScreen extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text>WelcomeScreen</Text>
      </View>
    )
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#aa73b7',
    alignItems: 'center',
    justifyContent: 'center',
  },
})

App.js 

import { createSwitchNavigator, createStackNavigator } from 'react-navigation'

import WelcomeScreen from './src/components/screens/WelcomeScreen'
import AuthLoadingScreen from './src/components/screens/AuthLoadingScreen'


const AuthStackNavigator = createStackNavigator({
  Welcome: WelcomeScreen,
})

export default createSwitchNavigator({
  Authloading: AuthLoadingScreen,
  Auth: AuthStackNavigator
})

Однако, когда я запускаю следующее приложение в симуляторе iPhone X, оно продолжает показывать индикатор активности вместо того, чтобы направлять меня на экран приветствия (ожидаемое поведение).

Может кто-нибудь объяснить, почему это происходит?

Ответы [ 2 ]

0 голосов
/ 26 декабря 2018

this.loadApp () следует удалить из конструктора .Поместите его в хук жизненного цикла, например componentDidMount () , чтобы его вызывали после завершения монтажа компонента.

Это можно сделать для некоторого метода ивызовы функций : для этого нужны конструкторы.Как и в большинстве случаев, функции связывания вызываются внутри конструктора (лучшие практики)Также вы даете понять, что объект никогда не создается в неизвестном состоянии (без загруженной конфигурации).

Вы не должны этого делать, потому что ваш объект не инициализирован : вызов метода экземпляра в конструктореопасно, потому что объект еще не полностью инициализирован (это относится в основном к методам, которые могут быть переопределены).

0 голосов
/ 26 декабря 2018

вызов this.loadApp() в componentDidMount вместо constructor должно работать.

...