Reactアプリケーションがフォアグラウンドに入るとネイティブレンダリング

Question

私はシンプルなディスプレイをいくつかの非同期データに基づいています。

私のコードは次のような次のとおりです。

componentDidMount() { 
    asynFunctionCall(result => { 
    this.setState({stateVariable: result}); 
    }); 
} 

そして私は<Text>コンポーネントを表示するかどうかを決定するためにstateVariable変数の状態を使用します。asyncFunctionCallがするため

render() { 
    return (
    <View> 
     {this.state.stateVariable && 
     <Text> Special Message </Text> 
     } 
    </View> 
); 
} 

私が欲しいのです（非同期呼び出しの結果に影響する可能性がある）何かをして、アプリケーションに戻り、ディスプレイを適切に更新することができるように、アプリケーションがフォアグラウンドになるたびに実行されます。

これは標準的なアプリケーションのようですが、React NativeのライフサイクルAPIには標準的なサポート方法がありますが、それを見つけることはできません。

この動作をライフサイクル機能などで実現するにはどうすればよいですか？

Answer 1

はい。 AppState https://facebook.github.io/react-native/docs/appstate.html APIを使用できます。

私はこれをどこかに追加して、アプリの開始時にそれに応じてビューを調整することをお勧めします。

Answer 2

AppStateは主にiOSで動作するはずですが、Androidのバックグラウンドアクティビティは、自分のコード以外のネイティブモジュールがトリガされたとき（写真のキャプチャなど）にいつでもトリガされます。自宅または最近のアプリボタンのクリックを検出する方が良い方法です。これは、ソーシャルメディアや写真などの他のアプリからのフラグメントがバックグラウンド状態を引き起こすためです。アプリに残っているため、カメラなどのプロフィールに写真を追加しているために不要です。反応したネイティブホームが押されたAndroidの最近のアプリボタンのクリック数。このライブラリは単にアンドロイドボタンイベントを公開します。

npm i react-native-home-pressed --saveでライブラリをインストールしてから、react-native linkにリンクしてください。次に、あなたのアプリを再構築し、次のスニペットを追加します。

import { DeviceEventEmitter } from 'react-native' 
 

 
class ExampleComponent extends Component { 
 
    componentDidMount() { 
 
    this.onHomeButtonPressSub = DeviceEventEmitter.addListener(
 
    'ON_HOME_BUTTON_PRESSED', 
 
    () => { 
 
     console.log('You tapped the home button!') 
 
    }) 
 
    this.onRecentButtonPressSub = DeviceEventEmitter.addListener(
 
    'ON_RECENT_APP_BUTTON_PRESSED', 
 
    () => { 
 
     console.log('You tapped the recent app button!') 
 
    }) 
 
    } 
 
    componentWillUnmount(): void { 
 
    if (this.onRecentButtonPressSub) this.onRecentButtonPressSub.remove() 
 
    if (this.onHomeButtonPressSub) this.onHomeButtonPressSub.remove() 
 
    } 
 
}