时间戳

首页 > 解决方案 > React Native 中的响应式 UI

reactjs - React Native 中的响应式 UI

问题描述

如何在 React Native 中创建响应式 UI 或设计，例如视图（水平和纵向模式）、字体大小等...

并且不更改任何设备中的任何设计或 UI，它在所有设备中都是相同的。

我参考了很多材料，但我并不满意。

标签： reactjsreact-native

解决方案

对于响应式 UI，您可以使用 react-native-responsive-screen 并根据宽度和高度的百分比设计样式

对于响应式字体大小，您可以使用 react-native-responsive-fontsize 并拥有一个单独的组件作为 fonts.js 并在整个应用程序中使用它。

fonts.js 组件可以如下

import { Platform } from "react-native";
import { RFPercentage } from "react-native-responsive-fontsize";

export default fonts={
fontSmall: Platform.OS==='android'?  RFPercentage(1.8): RFPercentage(1.5),
fontMedium:  RFPercentage(1.8),
fontEntry:RFPercentage(2.0),
fontHeader:RFPercentage(2.1),
fontTV:RFPercentage(2.2),
fontNormal:RFPercentage(2.5),
fontLargeExtra:RFPercentage(2.7),
fontLarge:RFPercentage(3.0),
fontXLarge:RFPercentage(3.5),
fontXXLarge:RFPercentage(4.0),
fontXXLarge:RFPercentage(4.5),
};

组件中的字体组件和响应式 UI 可以按如下方式使用：

import fonts from './fonts';
import { widthPercentageToDP as wp, heightPercentageToDP as hp } from 'react-native-responsive-screen';

const styles = StyleSheet.create({
viewStyle: {
width: wp('20%'),
marginTop: hp(‘4%’),
height: hp('4.5%'),
fontSize: fonts.fontSmall,
},

});

推荐阅读