如何在不使用 react-native 的 Dimension 属性的情况下使 React-Native 应用响应?

问题描述 投票:0回答:3

我想让 React-Native 应用程序响应而不使用维度,因为每次它根据窗口大小计算屏幕高度和宽度,以及每次在抽象级别进行计算。还有其他方法吗??

javascript react-native responsive-design
3个回答
2
投票

你可以依靠 Flexbox 来实现布局,而不是尺寸和百分比,如果我正确理解你的问题


1
投票

使用 Flexbox : Flexbox 是一种多功能布局工具,可用于构建响应式用户界面。它允许您以多种方式在屏幕上布置组件,而无需手动定义大小、位置和边距。

响应组件: 组件可以通过改变它们的大小和相对于设备屏幕大小的位置来响应。借助 React 的众多可访问选项,这是可能的。 要将 CSS 应用于任何组件或文本,请使用 Style 属性。根据您的设计要求使用各种组件创建嵌套结构。

避免硬编码值: 对大小、边距和位置使用硬编码值会使应用程序无响应。相反,使用特定于平台的样式、相对大小


0
投票

在获得一年经验后,我想通过回答我的问题来分享一些技巧。我发现创建响应式 React-Native 移动应用程序的结果如下:

1)我们一定要用Flexbox不要过多,但要在我们要做分区的地方。它将响应地进行分区。[使用 flexflexDirection 属性]

2) 尝试使用 widthheight 中的百分比值,如

width as 50%
而不是硬编码值 10,20 等

3)利用布局道具,例如alignItemsjustifyContentflexWrap

4)使用SafeAreaView。它将确保我们的内容显示在屏幕的可见部分之间。

5) 使用 Platform 以提供特定于平台的样式,因为某些在 Android 中工作的样式会在 iOS 中引起问题。

© www.soinside.com 2019 - 2024. All rights reserved.