Question

This article解释了如何使用初始屏幕在初始屏幕之前加载数据。基本上定义为：

const InitialNavigator = createSwitchNavigator({
  Splash: SplashScreen,
  App: AppNavigator
});

export default createAppContainer(InitialNavigator);

这里是AppNavigator：

const AppNavigator = createBottomTabNavigator(
  {
    Home: {
      screen: HomeNavigator
    },
    HighScores: {
      screen: HighScoresScreen
    },
    {
     initialRouteName: initialScreen,
   } 
  }
);

initialScreen将基于初始化期间加载的数据。

这里是组件SplashScreen，它调用2个异步函数来加载变量result和user：

class SplashScreen extends React.Component {
  performTimeConsumingTask = async() => {
    var result, user;
    try {
    result = await helper.getJwtToken();
    console.log("App.js token result is : ", result);
    if (result) {
      console.log("App.js result is true. Retrieve user");
      user = await helper._getUser(result.password, result.username); 
      console.log("User is : ", user.name);

    } else {
      console.log("App.js result is false");

    };
    console.log("I am out of App.js async without error");
  } catch (err) {
    console.log("Error in retrieving token : ", err);
    return "";

  };
  }

  async componentDidMount() {
    // Preload data from an external API
    // Preload data using AsyncStorage
    const data = await this.performTimeConsumingTask();

    if (data !== null) {
      this.props.navigation.navigate('App');
    }
  }
.......

但是如何将result和user的值传递给App？

Answer 1

一种解决方案是将这些数据保存为全局状态（例如React Hook或redux）或存储（例如使用react-native-async-storage）。下一个屏幕将需要访问共享资源以检索数据。以下示例使用异步存储来存储数据：

import AsyncStorage from '@react-native-community/async-storage';

performTimeConsumingTask = async() => {
    var result, user;
    try {
    result = await helper.getJwtToken();
    console.log("App.js token result is : ", result);
    if (result) {
      await AsyncStorage.setItem('jwtToken', result);
      console.log("App.js result is true. Retrieve user");
      user = await helper._getUser(result.password, result.username); 
      console.log("User is : ", user.name);
      await AsyncStorage.setItem('user', user);
    } else {
      console.log("App.js result is false");

    };
    console.log("I am out of App.js async without error");
  } catch (err) {
    console.log("Error in retrieving token : ", err);
    return "";

  };
  }

另一种解决方案是将result和user作为参数传递给方法navigation.navigate。为此，您的函数performTimeConsumingTask需要返回两个对象。

class SplashScreen extends React.Component {
  performTimeConsumingTask = async() => {
    var result, user;
    try {
    result = await helper.getJwtToken();
    console.log("App.js token result is : ", result);
    if (result) {
      console.log("App.js result is true. Retrieve user");
      user = await helper._getUser(result.password, result.username); 
      console.log("User is : ", user.name);
      return {
        user,
        result,
        success: true
      }
    } else {
      throw new Error("App.js result is false");
    };
    throw new Error("I am out of App.js async without error");
  } catch (err) {
    console.log("Error in retrieving token : ", err);
    return {
      success: false,
      error: err.message
    };

  };
  }

  async componentDidMount() {
    // Preload data from an external API
    // Preload data using AsyncStorage
    const data = await this.performTimeConsumingTask();

    if (data !== null && data.success === true) {
      this.props.navigation.navigate('App', data);
    }
  }

Answer 2

您可以传递一个名为“ params”的参数，以将值传递给下一个屏幕

看看document

Answer 3

尝试传递参数：

class SplashScreen extends React.Component {
  performTimeConsumingTask = async() => {
    var result, user;
    try {
    result = await helper.getJwtToken();
    console.log("App.js token result is : ", result);
    if (result) {
      console.log("App.js result is true. Retrieve user");
      user = await helper._getUser(result.password, result.username); 
      console.log("User is : ", user.name);
      return {result, user};
    } else {
      console.log("App.js result is false");

    };
    console.log("I am out of App.js async without error");
  } catch (err) {
    console.log("Error in retrieving token : ", err);
    return {result: null, user: null};

  };
  }

  async componentDidMount() {
    // Preload data from an external API
    // Preload data using AsyncStorage
    const data = await this.performTimeConsumingTask();

    if (data !== null) {
      this.props.navigation.navigate('App', {result, user});
    }
  }

在App内，您可以通过以下方式使用它：

const { result, user } = this.props.navigation.state.params;

如何将在启动画面中检索到的异步数据传递给App.js？

3 个答案: