React Native 中不同设备分辨率不同的问题答案

【问题标题】：Different Resolution Problem in Different Devices in React NativeReact Native 中不同设备分辨率不同的问题
【发布时间】：2023-01-28 01:12:34
【问题描述】：

我是 React Native 的新手，我正在尝试构建一个应用程序，因此出于测试目的，我在 Android Emulator 中使用 Pixel 4，所以我根据 Pixel 4 分辨率设计了我的应用程序，但是当我在 Nexus 5 等其他设备中检查我的应用程序时一半的内容无法正确显示在屏幕上。那么，我该如何设计为不同设备自动设置分辨率的代码呢？

我也附上问题图片：

On Pixel 4 (this one is perfect) On Nexus 5

这是我试过的

`import { View, Text, Image, StyleSheet, StatusBar } from "react-native";
import React from "react";
import { SafeAreaView } from "react-native-safe-area-context";
import { Button } from "react-native-paper";
import { useNavigation } from "@react-navigation/native";


`const SplashScreen = () => {
  const navigation = useNavigation();
  return (
    <SafeAreaView
      style={{
        height: "auto",
      }}
    >
      <StatusBar
        translucent={true}
        backgroundColor={"transparent"}
        barStyle="dark-content"
      />
      <View style={styles.container}>
        <View className="w-[90%] flex items-center justify-center">
          <Text
            className="text-slate-500 text-2xl z-10"
            style={{ fontFamily: "regular" }}
          >
            Taste of
          </Text>
          <Text
            className="text-slate-500 text-2xl mt-3 z-10"
            style={{ fontFamily: "regular" }}
          >
            Every Household
          </Text>
        </View>

        <View>
          <Image
            source={require("../assets/logo.png")}
            className="h-[380px] w-[380px] object-cover mt-5 ml-2"
          />
          <View className="flex items-center justify-center -mt-5">
            <Text
              style={{
                fontFamily: "rog",
                fontSize: 23,
                color: "#1D2044",
                marginBottom: 10,
                zIndex: 10,
              }}
            >
              by
            </Text>
            <Text
              style={{
                fontFamily: "rog",
                fontSize: 33,
                color: "#1D2044",
                zIndex: 10,
              }}
            >
              imexture
            </Text>
          </View>
        </View>

        <View className="w-[90%] mt-24 z-10">
          <Button
            style={styles.radioButton}
            onPress={() => navigation.navigate("Login")}
          >
            <Text
              className="text-white text-xl tracking-widest"
              style={{ fontFamily: "regular" }}
            >
              Let's Go
            </Text>
          </Button>
        </View>
      </View>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    justifyContent: "center",
    alignItems: "center",
    height: "100%",
  },
  radioButton: {
    backgroundColor: "#1D2044",
    borderRadius: 10,
    borderColor: "#1D2044",
    padding: 8,
  },
});

export default SplashScreen;`

`我也试过 React-Native Dimensions 但问题仍然存在

【问题讨论】：

标签： react-native screen-resolution

【解决方案1】：

如果您想滚动到其余内容，请使用 ScrollView 组件。只需将内容包装在 ScrollView 中。这里有更多信息：https://reactnative.dev/docs/scrollview
如果你想让布局响应所有设备（甚至是平板电脑或其他设备），请尝试从熟悉 flexbox 布局开始。这里有文档和示例https://reactnative.dev/docs/flexbox
你尝试带很多 web css 来响应原生。 className、zIndex、fontFamily: "rog" 之类的东西将不起作用。

【讨论】：