React-Native ：当设备是平板电脑时添加条件答案

【问题标题】：React-Native : Add condition when device is tabletReact-Native ：当设备是平板电脑时添加条件
【发布时间】：2020-09-23 06:37:18
【问题描述】：

我想检测使用的是什么设备，为此我想使用 Expo-device。我想设置屏幕，以便当使用的设备是平板电脑时，屏幕左侧是一个组件，右侧是另一个组件（我想将屏幕拆分为 66.66% 左侧和 33.33% 右侧)。

我如何设置一个条件来说明如果设备是平板电脑我希望屏幕处于横向模式并在屏幕左侧添加一个组件？

如果有人可以帮助我完成不同的步骤，那就太好了，因为我有点迷茫。

非常感谢。

例如，假设当我使用 iphone 或 android 手机时，我有这个（这将是平板电脑上的正确组件）：

      <ImageBackground
        source={require("../../assets/images/background.jpg")}
        style={styles.backgroundImage}
      >
        <Header
          backgroundImage={require("../../assets/images/bg-header.png")}
          centerComponent={{
            text: i18n.t("about.title"),
            style: styles.headerComponentStyle
          }}
          placement="center"
          containerStyle={styles.headerContainerStyle}
          statusBarProps={{ barStyle: "light-content" }}
        />
        <ScrollView style={styles.containerScroll}>
          <Text style={styles.h3}>{i18n.t("terms.title")}</Text>
          <Text style={styles.h5terms}>{i18n.t("terms.content")}</Text>
          <View style={styles.container}>
            <TouchableOpacity
              style={styles.touchable2}
              onPress={() => this.props.navigation.navigate("Settings")}
            >
              <View style={styles.view2}>
                <Text style={styles.textimg2}>
                  {i18n.t("signup.action.back")}
                </Text>
              </View>
              <Image
                source={require("../../assets/images/btn-background.png")}
                style={styles.tripsimg2}
              />
            </TouchableOpacity>
          </View>
          <Text>{"\n\n"}</Text>
        </ScrollView>
      </ImageBackground>
    );
  }
}

【问题讨论】：

您可以查看此链接，这将有助于解决React native check if tablet or screen in inches
感谢您抽出宝贵时间回答，我去看看这个。

标签： react-native tablet

【解决方案1】：

你需要使用 https://github.com/react-native-community/react-native-device-info 该插件为您提供 DeviceInfo。 DeviceInfo 有“isTablet()”方法。

使用展览设备：

import * as Device from 'expo-device';

Device.getDeviceTypeAsync()

示例用法：

https://github.com/expo/expo/blob/416771c5c1ca562d0f87a98c3bdea292a736ebe4/apps/native-component-list/src/screens/DeviceScreen.tsx

【讨论】：

感谢您抽出宝贵时间回答。我看过这个包，但我认为 Expo-device 可以做同样的工作？
是的，可以。如果您观察到 expo 设备库 "getDeviceTypeAsync" 以下是示例：github.com/expo/expo/blob/…

【解决方案2】：

你可以使用设备信息库... 之后你必须得到宽度和高度=这将通过使用设备信息得到那你就可以轻松搞定条件了

我在这里为你提供图书馆的链接 = => https://github.com/react-native-community/react-native-device-info

还有一件事你可以做安装后你可以使用方法 isTablet()

它将提供你的布尔值在价值之后你可以做任何你想做的事

【讨论】：

【解决方案3】：

最后我使用 Expo-device 和 deviceType = await Device.getDeviceTypeAsync(); 然后，在状态：deviceType: 0, created const isMobile = !(this.state.deviceType === 2 || this.state.deviceType === 3 || this.state.deviceType === 4); then isMobile === true ? null : (my condition )}

我正在努力让它工作，但还没有。

【讨论】：