React Native 代码在 iPhone X 模拟器上表现不同

Question

我正在使用 React navigation 2 和 React native 来构建身份验证流程（遵循此 tutorial）。

当我在 iPhone 6s 模拟器中运行应用程序工作正常。由于在 AsyncStorage.

中找不到 userToken，该应用程序将我引导至欢迎屏幕

我的代码如下：

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 模拟器中运行以下应用程序时，它一直显示 activity 指示器而不是将我引导至欢迎屏幕（预期行为） .

谁能解释为什么会这样？

Answer 1

在 componentDidMount 中调用 this.loadApp() 而不是 constructor 它应该可以工作。

Answer 2

this.loadApp() 应该从 constructor。将它放在生命周期挂钩中，例如 componentDidMount() 以便在组件完成安装后调用它。

您可以对某些方法和函数调用执行此操作：这就是构造函数的用途。就像大多数绑定函数在构造函数内部调用（最佳实践）。您还明确表示该对象永远不会在未知状态下构造（未加载配置）。

你不应该因为你的对象没有被初始化 : 在构造函数中调用实例方法是危险的，因为对象还没有完全初始化（这主要适用于方法而不是可以覆盖）。

React Native 代码在 iPhone X 模拟器上表现不同

React Native code behave differently on iPhone X simulator

react-native

react-navigation

iphone-x