React Native: как определить, является ли устройство iPhone или iPad

Я знаю с React Native, что у нас есть возможность определить, запускается ли iOS или Android с помощью модуля Platform, но как мы можем определить, какое устройство используется в iOS?

Ответ 1

По состоянию на 9.02.2018 г.

import { Platform } from 'react-native'
Platform.isPad // boolean

Имейте в виду, что (на данный момент) у него нет аналога для Android.

Ответ 2

Самый простой подход будет использовать соотношение сторон. Код будет выглядеть следующим образом:

import { Dimensions } from 'react-native';
const {height, width} = Dimensions.get('window'); 
const aspectRatio = height/width;

if(aspectRatio>1.6) {

   // Code for Iphone

}
else {

   // Code for Ipad

}

Соотношение сторон iPad составляет 4: 3 (1.334) и соотношение сторон iPhone составляет 16: 9 (1.778)

Убедитесь, что вы используете iOS-устройство с использованием метода Platform.OS === 'ios' перед применением указанной выше логики.

Ответ 3

Если вы ищете способ сделать это без включения сторонних библиотек (например, response-native-device-info), вы также можете сделать следующее:

import { NativeModules } from 'react-native';
const { PlatformConstants } = NativeModules;
const deviceType = PlatformConstants.interfaceIdiom;

deviceType может принимать значения: phone, pad, tv, carplay и unknown.

Ответ 4

Вы можете приблизительно определить, какое устройство iOS используется без каких-либо внешних зависимостей... Сначала запросите Platform.OS затем модуль Dimensions, чтобы запросить у устройства размеры экрана, которые можно перевести на устройства: http://iosres.com/

Ответ 5

Вы должны быть в состоянии получить эту информацию из модуля react-native-device-info

https://github.com/rebeccahughes/react-native-device-info

Ответ 6

В реагирующем нативе есть тип PlatformIOSStatic, вам нужно принудительно привести Platform к PlatformIOSStatic при использовании машинописи.

import { Platform, PlatformIOSStatic } from 'react-native'

if (Platform.OS === 'ios') {
  const platformIOS = Platform as PlatformIOSStatic
  console.log(platformIOS.isPad)
  console.log(platformIOS.isTVOS)
}

Дизайн интерфейса здесь довольно плохой, надеюсь, команда RN улучшит его.

Ответ 7

Очень просто

    import { Platform} from 'react-native'
    if (Platform.OS === 'android') {
      //do something...
    }

Или, если вам нужна дополнительная информация об устройстве:

Вы можете использовать Just use NativeModules.RNDeviceInfo

Есть много переменных, которые наверняка помогут вам:

    import {NativeModules} from 'react-native'

    console.log("NativeModules.RNDeviceInfo", NativeModules.RNDeviceInfo)

Вывод:

Ответ 8

Хорошее решение by @Maxwelll. Более точный подход заключается в измерении отношения экрана. Все iPhone - 16: 9, все iPads - 3: 4.

Ответ 9

$ npm install react-native-device-detection --save

$ react-native link

if(Device.isIos) {

}

if(Device.isTablet) {

}

Ответ 10

Лично, мне не нравится использовать внешний компонент для применения простых функций, поэтому я решил, что пользователь:

Использование EXPO

Экспо содержит свойства, которые помогают проверять информацию об устройстве → https://docs.expo.io/versions/latest/sdk/constants.html#expoconstantsplatform, для iOS вы можете использовать:

import Expo from 'expo';
import React from 'react';
import { Text, View } from 'react-native';

class HomeComponent extends React.Component {

  render() {
    console.log(Expo.Constants.manifest);
    console.log(Expo.Constants.platform.ios.userInterfaceIdiom);

    return (
      <View>
        <Text>
          {Expo.Constants.platform.ios.userInterfaceIdiom}
        </Text>
      </View>
    );
  }
}

Использование React-Native API

Однако мое приложение также запускается в android, затем я использовал решение, поднятое @Alex Pavtoulov:

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

const { height, width } = Dimensions.get('window');
const DeviceType = (height / width) > 1.6 ? 'Tablet' : 'Phone';


class HomeComponent extends React.Component {

  render() {        
    return (
      <View>
        <Text>
          This deice is: {DeviceType}
        </Text>
      </View>
    );
  }
}