Обновление компонента React Native force, когда приложение переходит на передний план

Мое приложение отображает некоторые тексты. Мне нужно повторно отобразить Component при изменении размера шрифта через Настройки -> Специальные возможности -> Размер шрифта:

введите описание изображения здесь

Итак, в основном это последовательность se:

  • Приложение открыто (передний план).
  • Пользователь открывает настройки телефона, поэтому приложение переходит на передний план (не полностью закрывается).
  • Пользователь изменяет размер шрифта через Настройки --> Специальные возможности --> Размер шрифта.
  • Пользователь закрывает настройки и открывает приложение, которое снова выходит на передний план.

На данный момент мне нужно перезагрузить приложение, потому что некоторые Components нужно адаптировать.

Я использую react-native-device-info, чтобы получить размер шрифта с использованием const fontScale = DeviceInfo.getFontScale();, но его значение не обновляется до тех пор, пока приложение не будет полностью закрыто и открыто.

Любые идеи?


react-native react-hooks accessibility font-scaling react-native-device-info
person Ale    schedule 04.04.2019    source источник

Ответы (1)


arrow_upward
5
arrow_downward

Вы можете установить 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>;
  }
}
person Shivam    schedule 04.04.2019
comment
Спасибо за Ваш ответ! Можно ли реализовать с помощью хуков? Я новичок в React, и в моем проекте используются хуки. - person Ale; 04.04.2019
comment
Я не углублялся в хуки, но мне потребовалось всего несколько минут, чтобы преобразовать такой простой компонент в функциональный компонент с помощью hooks. В настоящее время я использую recomposeJS - person Shivam; 04.04.2019
comment
Я всегда получаю сообщение об ошибке Не могу выполнить обновление состояния React для несмонтированного компонента всякий раз, когда я использую setState в обработчике событий appStateChange. Есть идеи, почему? - person Rakib; 06.08.2019