Dimension.get ('window'). Ширина в React Native в соответствии с ориентацией SplashScreen, а не текущей ориентацией? - PullRequest
Новая
       17

Dimension.get ('window'). Ширина в React Native в соответствии с ориентацией SplashScreen, а не текущей ориентацией?

0 голосов
/ 13 марта 2019

Я адаптирую приложение React Native с iPhone на iPad и столкнулся со странной проблемой. Я подозреваю об ошибке с RN. Когда пользователь находится в ландшафтном режиме и запускает приложение, оно будет иметь заставку в ландшафтном режиме, и с этим нет проблем. Но приложение продолжает распознавать Dimensions.get('window').width как ширину ландшафтного режима даже после того, как я заблокирую экран для портрета.

Моя структура приложения выглядит следующим образом. Материнский компонент приложения имеет код, который блокирует приложение в портретном режиме, например: 

var Orientation = require('react-native').NativeModules.Orientation;

componentWillMount(){
    Orientation.lockToPortrait();
}

Из этого начального компонента другие компоненты загружаются через маршрутизатор react-native-router-flux. Внутри этих компонентов компоненты пользовательского интерфейса были стилизованы с использованием React Native Dimensions API. как это: 

<View style={{ width: Dimensions.get('window').width - 10}} />

Он отлично работает на iPhone, поскольку при запуске приложения iPhone всегда находится в портретном режиме. Но на iPad, когда у пользователя экран в горизонтальном режиме (во время запуска приложения), все приложение выглядит странно, потому что RN пересчитывает высоту экрана как ширину экрана. Когда пользователь запускает приложение в портретном режиме, такой же проблемы не будет. Этого не должно быть, поскольку Dimensions.get('window').width вызывается сразу после того, как приложение уже заблокировано для портрета. Это не имеет смысла для меня ...

К сожалению, мне действительно нужно иметь возможность работать в ландшафтном режиме, поскольку внутри некоторых экранов я заставляю пользователя переходить в ландшафтный режим, выполняя Orientation.lockToLandscape()

Какие-нибудь решения этой проблемы?

1 Ответ

0 голосов
/ 13 марта 2019

Я придумал хак, чтобы мое приложение работало быстро, но я не думаю, что это лучший метод. Я в основном измеряю экран, чтобы узнать, в каком направлении заблокировано мое приложение. Как это: 

const getWidth = (percentage: number) => {
  if (Dimensions.get('window').width > Dimensions.get('window').height) {
    return (Dimensions.get('window').height * percentage) / 100;
  }
  return (Dimensions.get('window').width * percentage) / 100;
};

const getHeight = (percentage: number) => {
  if (Dimensions.get('window').width > Dimensions.get('window').height) {
    return (Dimensions.get('window').width * percentage) / 100;
  }
  return (Dimensions.get('window').height * percentage) / 100;
};

После этого я могу создавать объекты Stylesheet.create (), которые адаптируются к ориентации экрана. Как это: 

StyleSheet.create({
fullWidth: {
    width: getWidth(100) - 60,
  }
})

вместо: 

StyleSheet.create({
fullWidth: {
    width: Dimensions.get('window').width - 60,
  }
})
...