Question

我正在使用带有React native的react导航2来构建身份验证流程（遵循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模拟器中运行以下应用程序时，它始终显示活动指示器，而不是将我引导到欢迎屏幕（预期行为）。

谁能解释为什么会这样？

Answer 1

在this.loadApp()中调用componentDidMount而不是constructor会起作用。

Answer 2

应该从 构造函数 中删除

this.loadApp（） 。将其放在诸如 componentDidMount（） 之类的生命周期挂钩中，以便在组件完成安装后调用它。

您可以对某些方法和函数进行调用：这就是构造函数的用途。像大多数绑定函数一样，它们在构造函数内部被调用（最佳实践）。您还可以清楚地知道该对象永远不会在未知状态下构造（未加载配置）。

您不应这样做，因为对象不是未初始化的：在构造函数中调用实例方法很危险，因为该对象尚未完全初始化（这主要适用于可以被覆盖的方法）。

React Native代码在iPhone X模拟器上的行为有所不同

2 个答案: