Question

我在AsyncStorage中使用ComponentWillMount来获取本地存储accessToken，但它在render()函数运行后返回了承诺。我如何让render()等到承诺完成？谢谢。

Answer 1

据我所知，你不能让render等待。我在我正在处理的应用程序中完成的是添加一个加载屏幕，直到AsyncStorage的承诺解决。请参阅以下示例：

import React, {
  AsyncStorage,
  View,
  Text
} from 'react-native';

class Screen extends React.Component {

  state = {
    isLoading: true
  };

  componentDidMount() {
    AsyncStorage.getItem('accessToken').then((token) => {
      this.setState({
        isLoading: false
      });
    });
  },

  render() {
    if (this.state.isLoading) {
      return <View><Text>Loading...</Text></View>;
    }
    // this is the content you want to show after the promise has resolved
    return <View/>;
  }

}

在状态对象上设置isLoading属性将导致重新呈现，然后您可以显示依赖于accessToken的内容。

另外，我写了一个名为react-native-simple-store的小库，它简化了AsyncStorage中的数据管理。希望你觉得它很有用。

Answer 2

基于react-native doc，您可以执行以下操作：

import React, { Component } from 'react';
import {
  View,
} from 'react-native';

let STORAGE_KEY = '@AsyncStorageExample:key';

export default class MyApp extends Component {

  constructor(props) {
    super(props);
    this.state = {
      loaded: 'false',
    };
  }

  _setValue = async () => {
    try {
      await AsyncStorage.setItem(STORAGE_KEY, 'true');
    } catch (error) { // log the error
    }
  };

  _loadInitialState = async () => {
    try {
      let value = await AsyncStorage.getItem(STORAGE_KEY);
      if (value === 'true'){
        this.setState({loaded: 'true'});
      } else {
        this.setState({loaded: 'false'});
        this._setValue();
      }
    } catch (error) {
      this.setState({loaded: 'false'});
      this._setValue();
    }
  };

  componentWillMount() {
    this._loadInitialState().done();
  }

  render() {
    if (this.state.loaded === 'false') {
      return (
        <View><Text>Loading...</Text></View>
      );
    }
    return (
      <View><Text>Main Page</Text></View>
    );
  }
}

Answer 3

您可以使用比异步存储更易于使用的react-native-easy-app。这个库很棒，它使用异步存储来异步保存数据，并使用内存来同步立即加载和保存数据，因此我们将异步保存到内存中并在应用程序同步中使用。

import { XStorage } from 'react-native-easy-app';
import { AsyncStorage } from 'react-native';

const initCallback = () => {

     // From now on, you can write or read the variables in RNStorage synchronously

     // equal to [console.log(await AsyncStorage.getItem('isShow'))]
     console.log(RNStorage.isShow); 

     // equal to [ await AsyncStorage.setItem('token',TOKEN1343DN23IDD3PJ2DBF3==') ]
     RNStorage.token = 'TOKEN1343DN23IDD3PJ2DBF3=='; 

     // equal to [ await AsyncStorage.setItem('userInfo',JSON.stringify({ name:'rufeng', age:30})) ]
     RNStorage.userInfo = {name: 'rufeng', age: 30}; 
};

XStorage.initStorage(RNStorage, AsyncStorage, initCallback);

Answer 4

React-native基于Javascript，它不支持阻止功能。这也是有道理的，因为我们不希望UI卡住或看起来没有响应。你可以做的是在渲染功能中处理它。即，当您从AsyncStorage

获取信息时，将加载屏幕重新渲染

React Native AsyncStorage在呈现

4 个答案: