React-Native：设备为平板电脑时添加条件

如何解决React-Native：设备为平板电脑时添加条件

我想检测使用什么设备，为此，我想使用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>
    );
  }
}

解决方法

您需要使用 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

是的，您可以使用设备信息库... 之后，您必须获取宽度和宽度=这将通过使用设备信息来获取那么你可以轻松地创造条件

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

您可以做的另一件事安装后，您可以使用isTablet（）方法

它将提供u布尔值在该值之后，您可以做任何您想做的事

最后，我将Expo-device与deviceType = await Device.getDeviceTypeAsync();一起使用，处于以下状态：deviceType: 0,创建了const isMobile = !(this.state.deviceType === 2 || this.state.deviceType === 3 || this.state.deviceType === 4);然后是isMobile === true ? null : (my condition )}

我正在尝试使其正常运行，但是还没有。