React Native AsyncStorage извлекает данные после рендеринга

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 Установка недвижимости на государственном объекте вызовет повторную визуализацию, а затем вы можете показать содержимое, которое опирается на маркере доступа.

На боковой ноте я написал небольшую библиотеку под названием react-native-simple-store, которая упрощает управление данными в AsyncStorage. Надеюсь, вы найдете ее полезной.

Answer 2

React-native основан на Javascript, который не поддерживает блокирующие функции. Также это имеет смысл, поскольку мы не хотим, чтобы пользовательский интерфейс застревал или казался невосприимчивым. Что вы можете сделать, это обработать это в функции рендеринга. У меня есть экран загрузки, повторно отображающий его, когда вы получаете информацию от AsyncStorage

Answer 3

на основе реакции нативным 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> 
    ); 
    } 
}