reactjs - 我如何在类方法中使用反应导航？

Question

import * as React from 'react';
import { createAppContainer, createSwitchNavigator } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import { Text, View } from 'react-native';


class LoadingScreen extends React.Component {
  dataCheck = () => {
    for (i = 0; i < 5; i++) { // data loading time in real code
      if (i == 4) {
        this.props.navigation.navigate('AppStack')
      }
    }
  }
  render() {
    return (
      <View>
        <Text>loading</Text>
        {this.dataCheck}
      </View>
    );
  }
}

class MainScreen extends React.Component {
  render() {
    return (
      <View>
        <Text>mainscreen</Text>
      </View>
    );
  }
}


const AppNavigator = createStackNavigator(
  {
    main: MainScreen
  },
  {
    initialRouteName: 'main'
  }
)

const LoadNavigator = createSwitchNavigator(
  {
    load: LoadingScreen,
    AppStack: AppNavigator
  },
  {
    initialRouteName: 'load'
  }
)

export default createAppContainer(LoadNavigator)

我试图在加载数据时显示加载屏幕。所以我在“LoadingScreen”类中编写了“dataCheck”方法，它一直等到数据被加载（上面代码中的语句）并导航到“AppStack”。但我认为“this.props.navigation.navigate('AppStack')”不起作用。如何在类的方法中使用反应导航？

标签： reactjsreact-nativereact-navigationreact-navigation-stack

Answer 1

你只需要更换

 {this.dataCheck}

和

{this.dataCheck()}