react-native - React Native 代码在 iPhone X 模拟器上的行为不同

Question

我正在使用带有 React Native 的 React Navigation 2 来构建身份验证流程（遵循本教程）。

当我在 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',
  },
})

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

谁能解释为什么会这样？

标签： react-nativereact-navigationiphone-x

Answer 1

打电话this.loadApp()而componentDidMount不是constructor它应该工作。