反应本机大小，它会根据设备的大小自动缩放吗？

Question

我是 React Native 的新手，我有一个问题。 React Native 是否会根据设备缩放组件的大小，或者如果不能，最好的方法是什么？

Answer 1

您可以在 react-native 中使用 flexbox，它将自动缩放组件以填充 space。

如果您想针对不同尺寸进行更高级的样式更改，则需要更高级的解决方案。我真的很喜欢 shopify 的库重新样式化，他们有一些解决方案，但很可能 flex 将是您所需要的。

https://github.com/Shopify/restyle

Answer 2

您可以使用一些库来帮助解决这个问题，例如：react-native-responsive-fontsize

只需将组件的 width/height 配置为 RFValue 为：

import { RFValue } from "react-native-responsive-fontsize"

export function Welcome(){
return (
    <View style={{width: RFValue(50)}}>
       <Text style={styles.welcome}>Hello</Text>    
    </View>
)}

const styles = StyleSheet.create({
      welcome: {
        fontSize: RFValue(24) 
        textAlign: "center",
        margin: RFValue(10),
      },
});

您不需要在每个组件上都使用它或 measure/size

Answer 3

默认情况下，React Native 不会缩放组件大小。但是，您可以在设置样式时执行一些操作，以确保它在所有设备上看起来都相似：

以百分比而不是数字给出宽度和高度
使用 flex 获得观看次数。这会将一定百分比的屏幕分配给该组件。
尽量使用alignItems和justifyContent，而不是手动赋值。
使用 react-native-responsive-fontsize 中的 RFValue，根据屏幕尺寸缩放。

这应该会使该应用在所有设备上看起来都相似

反应本机大小，它会根据设备的大小自动缩放吗？

React native size, does it scale automatically depending on the size of device?

react-native

react-native-stylesheet