#react-native #accessibility #react-hooks #react-native-device-info #font-scaling
#react-native #Специальные возможности #реагирующие крючки #react-native-device-info #масштабирование шрифта
Вопрос:
Мое приложение отображает некоторые тексты. Мне нужно повторно отобразить Component
при изменении размера шрифта через настройки -> Доступность -> Размер шрифта:
Итак, в основном это последовательность se:
- Приложение открыто (передний план).
- Пользователь открывает настройки телефона, поэтому приложение переходит на передний план (не полностью закрыто).
- Пользователь изменяет размер шрифта через настройки via -> Доступность -> Размер шрифта.
- Пользователь закрывает настройки и открывает приложение, которое снова переходит на передний план.
На этом этапе мне нужно перезагрузить приложение, потому что некоторые Components
необходимо адаптировать.
Я использую react-native-device-info для получения размера шрифта с помощью const fontScale = DeviceInfo.getFontScale();
, но его значение не обновляется до тех пор, пока приложение не будет полностью закрыто и открыто.
Есть идеи?
Ответ №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/) amp;amp;
nextAppState === 'active'
) {
console.log('App has come to the foreground!');
}
this.setState({appState: nextAppState});
};
render() {
return <Text>Current state is: {this.state.appState}</Text>;
}
}
Комментарии:
1. Спасибо за ваш ответ! Можно ли реализовать с использованием перехватов? Я совсем новичок в React, и в моем проекте используются хуки
2. Я не углублялся в перехваты, но требуется всего несколько минут исследований, чтобы преобразовать такой простой компонент в функциональный с помощью
hooks
. В настоящее время я используюrecomposeJS
3. Я всегда получаю сообщение об ошибке «Не удается выполнить обновление состояния реакции для размонтированного компонента» всякий раз, когда я использую setState в обработчике событий appStateChange. Есть идеи, почему?