Как передать асинхронные данные, полученные с экрана-заставки, в App.js?

Question

В этой статье объясняется, как использовать заставку для загрузки данных перед начальным экраном.По сути, он определяет:

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

Вы можете передать параметр с именем "params", чтобы передать значение на следующий экран

взгляните на документ

Answer 2

Попробуйте передать параметры:

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});
    }
  }

и внутри приложения вы можете использовать его следующим образом:

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

Answer 3

Одним из решений является сохранение этих данных в глобальном состоянии (например, React Hook или redux) или в хранилище (например, с использованием response-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);
    }
  }