当应用程序进入前台时,React Native Force组件将刷新

时间:2019-04-04 15:38:19

标签: react-native accessibility react-hooks react-native-device-info font-scaling

我的应用程序显示一些文本。当通过设置->辅助功能->字体大小更改字体大小时,我需要重新渲染Component

enter image description here

所以基本上这是se序列:

  • 该应用已打开(前景)。
  • 用户打开“电话设置”,以便应用程序进入前台(未完全关闭)。
  • 用户通过设置->辅助功能->更改字体大小 字体大小。
  • 用户关闭设置并打开应用程序进入前台 再次。

这时我需要重新加载应用程序,因为需要修改某些Components

我正在使用react-native-device-info通过const fontScale = DeviceInfo.getFontScale();获取字体大小,但是直到应用程序完全关闭并打开后,它的值才会更新。

有什么想法吗?

1 个答案:

答案 0 :(得分:1)

您可以将appstate设置为nextAppState。这应该导致组件重新呈现。

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

class AppStateExample extends Component {
  state = {
    appState: AppState.currentState,
  };

  componentDidMount() {
    AppState.addEventListener('change', this._handleAppStateChange);
  }

  componentWillUnmount() {
    AppState.removeEventListener('change', this._handleAppStateChange);
  }

  _handleAppStateChange = (nextAppState) => {
    if (
      this.state.appState.match(/inactive|background/) &&
      nextAppState === 'active'
    ) {
      console.log('App has come to the foreground!');
    }
    this.setState({appState: nextAppState});
  };

  render() {
    return <Text>Current state is: {this.state.appState}</Text>;
  }
}