Question

我有一个基于某些异步数据的简单显示。

我的代码是这样的：

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

我使用状态变量stateVariable来决定是否显示<Text>组件：

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

我希望只要应用程序到达前台就可以运行asyncFunctionCall，以便用户可以离开应用程序，执行某些操作（这可能会影响该异步调用的结果），然后返回应用程序并正确更新显示。

这似乎是一个标准的应用程序行为，我想知道React Native的生命周期API是否有标准的方式来支持它，但我找不到它。

如何使用生命周期功能或其他方式实现此行为？

Answer 1

是。您可以使用AppState https://facebook.github.io/react-native/docs/appstate.html API。

我建议在应用程序启动时将其添加到某个位置并相应地协调您的视图。

Answer 2

AppState应该主要用于iOS，但是对于Android背景活动，只要触发了自己代码之外的本机模块，例如捕获照片，就会触发。检测家庭或最近的应用按钮点击是更好的方法。这是因为您的应用中来自社交媒体或照片等其他应用的片段也会触发背景状态，这是您不想要的，因为他们仍然在应用中将照片添加到相机的配置文件等。您可以轻松使用react-native-home-pressed检测Android上的主页和最近的app按钮点击。这个库只是暴露了android按钮事件。

首先使用npm i react-native-home-pressed --save安装库，然后将其链接到react-native link。然后重新构建您的应用并添加以下代码段。

＆＃13;

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

＆＃13;

React Native - 当应用程序进入前台时呈现

2 个答案: