Я знаю с React Native, что у нас есть возможность определить, запускается ли iOS или Android с помощью модуля Platform
, но как мы можем определить, какое устройство используется в iOS?
React Native: как определить, является ли устройство iPhone или iPad
Ответ 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
Ответ 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>
);
}
}