带有样式组件的本地响应中的响应行为

Question

我一直在尝试找到一种具有响应大小的方法以及根据大小在屏幕上添加/删除内容的方法。 在不存在本机媒体查询的情况下，也不用em / rem来查询大小，任何人都可以通过实现以下布局来分享自己的经验：

• 在小屏幕上显示一个按钮，但在表中显示3个按钮？
• 在小屏幕上，字体大小为16，但在表格中应为24

Answer 1

欢迎来到SO。为了提高响应速度，我一直在使用此库RN-responsive，这非常简单。假设您有一个带有height:100 and width:200 ,的组件，并且屏幕尺寸为360 * 640。因此您需要用

替换高度和宽度

height:hp("15.6%") // 100/640 = 15.6
width:wp("55.5%") //200/360 = 55.5

否则，如果您不想使用任何库，则可以使用React本机的Dimensions。

import {DImensions} from react native;
const deviceWidth = Dimensions.get("window").width;
const deviceHeight = Dimensions.get("window").height;

然后使用

这样的高度

height:0.156*deviceHeight 
width:0.55*deviceWidth

希望有帮助