5

値が AsyncStorage からフェッチされる前に React Native がレンダリングを試みるという、よくある問題です。いくつかの場所でこれに対する解決策を見てきましたが、何らかの理由でまったく機能しません。React Native 25.1 を使用しているためでしょうか。「読み込み中...」で無期限にスタックします。レンダーでコンソール ログを実行して isLoading (メソッドなし) を表示すると、if返されるため、理論的には動作するはずです。しかし、メソッドが有効になっていると、「読み込み中」に永久にスタックし、ログは false のみを返します。falsetrueif

import React, { Component } from 'react';

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

  class MainPage extends Component {
   constructor(props: Object): void {
   super();
   this.state = {
     isLoading: false,
   };
 }

  componentWillMount() {
    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/>;
  }

});
4

1 に答える 1

10

ねえ、これを試してみてください...

import React, { Component } from 'react';

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

class MainPage extends Component {

   constructor(props: Object): void {
       super(props);
       this.state = {
         isLoading: false,
       };
   }

  componentWillMount() {
    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/>;
  }
}

さらに説明が必要な場合はお知らせください...

于 2016-05-19T12:58:12.487 に答える