React 本机响应单元

Question

我一直在 youtube 上观看 Rect Native 教程，每个人都使用 padding:20 或 fontSize:18 等单位

您在专业应用程序中也是这样做的吗？什么是理想的做法？这是自动响应吗？

Answer 1

不，这不是自动响应。如果我们设置 padding:20，那么无论我们使用什么 phone，该组件的填充都会保持在 20。字体大小也是如此，即使它们是根据我们处理的像素密度进行缩放的。

必须手动实现响应式设计，这可以通过使用 Dimensions 来完成，如下所示。

import { Dimensions } from 'react-native'

const width = Dimensions.get('window').width
const height = Dimensions.get('window').height

我们现在可以根据我们设备的 width 使用不同的填充。

padding: width > 320 ? 20 : 15

当涉及到总体布局时，flexbox 负责响应性，例如假设我们在屏幕上有三个 flexDirection: 'row' 的元素，并且我们为所有这些元素设置 flex:1，那么无论我们的屏幕宽度是多少，可用的 space 将在它们之间平均分配。高度也是如此。

可能建议创建一个单独的 Fonts 文件，将字体大小和类似常量保存在一个公共位置，这样我们只需更改一次。

import { Dimensions } from 'react-native'

const width = Dimensions.get('window').width
const height = Dimensions.get('window').height

export Fonts = {

    h1: width > 320 ? 18 : 15,
    h2: width > 320 ? 16 : 14,

   ...
}

以上内容处理响应式字体大小，我们可以在所有其他屏幕中使用它，例如

<Text style={{fontSize: Fonts.h1}}>I am a header</Text>

React 本机响应单元

React native responsive units

responsive-design

react-native