响应本机与样式组件的响应行为

【问题标题】：Responsive behaviour in react native with styled-components响应本机与样式组件的响应行为
【发布时间】：2020-02-15 13:28:05
【问题描述】：

我一直在尝试找到一种方法来获得响应式尺寸以及根据尺寸在屏幕上添加/删除内容。在 react-native 媒体查询中不存在 em/rem 大小，任何人都可以通过实现布局来分享他们的经验，例如：

【问题讨论】：

【解决方案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 Native 的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

希望对你有帮助

【讨论】：