React Native: Как я могу использовать метод DeviceInfo isTablet () для условного применения стиля к элементу? - PullRequest
Новая
       10

React Native: Как я могу использовать метод DeviceInfo isTablet () для условного применения стиля к элементу?

0 голосов
/ 25 сентября 2019

Я пытаюсь адаптировать дизайн моего приложения к планшету, и один из способов определить, работает ли приложение на планшете, - это использовать модуль DeviceInfo, в частности метод isTablet ().Как я могу использовать этот метод для условного применения стилей к элементу?

Вот что я пытаюсь сделать в данный момент: 

import { checkIfDeviceIsTablet } from './helper-functions';

<View style={[styles.wrapper, checkIfDeviceIsTablet() === true ? styles.wrapperTablet : {}]}>
    {contents}
</View>

Функция checkIfDeviceIsTablet () выглядит следующим образом:

import DeviceInfo from 'react-native-device-info';

function checkIfDeviceIsTablet() {

    DeviceInfo.isTablet().then(isTablet => {
        return isTablet;
    });

}

Проблема заключается в том, что при загрузке компонента метод checkIfDeviceIsTablet () возвращает обещание, а не ожидаемое значение true / false, поэтому условные стили не применяются при запуске приложения на планшете.,Я попытался преобразовать функцию в формат async / await с помощью try / catch, но результат тот же.

Я бы использовал собственную функцию React Native Platform.isPad, но приложение также должно работать на Android.

Любая помощь приветствуется.

1 Ответ

1 голос
/ 25 сентября 2019

Я бы рекомендовал звонить DeviceInfo.isTablet() только один раз в начале вашего приложения.Вы можете сохранить результат глобально, а затем вы можете проверить тип без необходимости иметь дело с асинхронными обещаниями.

Чтобы сохранить тип глобально, вы можете выбрать следующие варианты:

  • Aглобальная переменная
  • API контекста React
  • Статическое свойство класса (при использовании ES6 +)
  • Некое решение для управления глобальными состояниями, такое как Redux

Вам все еще приходится иметь дело с первоначальной проблемой асинхронности, поскольку первый вызов DeviceInfo.isTablet() вернет асинхронное обещание.

Я бы порекомендовал заглянуть в контекстный API React.

Вот грубый пример: 

render() {
   return (
      <DeviceInfoContext.Consumer>
      { ({ isTablet }) => (
         <Text>Is this a tablet? {isTablet}</Text>
      ) }
      </DeviceInfoContext.Consumer>
   )
}

И ваш класс DeviceInfoContext будет выглядеть примерно так: 

class DeviceInfoContext extends React.Component {
   state = {
      isTablet: false
   }

   componentDidMount() {
      Device.IsTablet().then(result => this.setState({ isTablet: result }))
   }

   render() {
      return (
         this.props.children({ isTablet: this.state.isTablet })
      )
   }
}

Это просто грубый пример.Вы можете узнать больше о Context API в документации

...