React Native 布局

React Native 版本 0.55.4

在使用React native 开发过程中，遇到了很多布局问题。

一、适配各种尺寸的屏幕

React native 要使用一套UI去适配各种屏幕，尤其是安卓拥有着各种尺寸的屏幕。一般设计UI时会参照375*667或者其他一个固定尺寸来进行设计。所以我们应该对设计的内容进行整体的缩放。

通过屏幕宽和设计图的宽的比例，计算出一个缩放值，然后整个页面中的所有高度大小相关的style（fontSize,lineHeight,margin,pading,width,height....）都乘以这个缩放值。但是这样在屏幕宽高比与设计图宽高比相差比较大的设备上时，可能会出现内容无法放下的情况，比如用375*667的设计图去按宽缩放时放在4s设备上运行。此时有两种解决方式,第一种，同时计算纵向的缩放值，与横向的缩放值做比较，取更小比例的值。

class Constant {
    //static 关键字用来定义一个类的一个静态方法。调用静态方法不需要实例化该类，但不能通过一个类实例调用静态方法。静态方法通常用于为一个应用程序创建工具函数。
    /*  widthStandard : 设计图宽度 默认375
     *  heightStandard : 设计图高度 默认667
     */
    static getPortraitScale = (widthStandard=375, heightStandard = 667) => {
        //取短的为宽
        let w = Dimensions.get("window").width;
        let h = Dimensions.get("window").height;
        let screenW = w > h ? h : w;
        let screenH = w > h ? w : h;
        //使用strand缩放后内容的高度
        let height = screenW / widthStandard * heightStandard;
        if (height < screenH) {
            return screenW / widthStandard;
        }
        return screenH / heightStandard;
    };
    //横屏获取缩放比
    static getLandscapeScale = (widthStandard=667, heightStandard = 375) => {
        //取长的为宽
        let w = Dimensions.get("window").width;
        let h = Dimensions.get("window").height;
        let screenW = w < h ? h : w;
        let screenH = w > h ? h : w;
        //使用strand缩放后内容的高度
        let height = screenW / widthStandard * heightStandard;
        if (height < screenH) {
            return screenW / widthStandard;
        }
        return screenH / heightStandard;
    };
}

二、横竖屏切换的问题

1.调整设备设置中的字体大小时，出现字体布局混乱的情况

安卓和iOS系统的设置中都有一个可以选择字体大小的选项。如果把字体放大后，App可能会出现文字布局混乱的情况。尤其在使用了lineHeight style后，文字可能会发生截断的情况。
解决方案:在中使用allowFontScaling={false}
这个allowFontScaling可以用来解决字体同时放大的问题，但是这个参数有一些版本限制，在react-native 0.3X之前，这个参数只适用于iOS设备（网上查的资料，未证实）。
在0.51版本之前这个参数即使使用了，会有一个非常奇怪的bug，文字确实不会放大缩小，但是lineHeight还是会放大缩小。所以仍然有截断现象。而在目前最新的0.55.4的版本中bug被修复。显示正常。

2.Navgation Bar高度不一致问题

使用自定义的Bar时。安卓和iOS高度不一致。Android计算Nav高度是从手机顶部开始计算。而iOS默认会向下偏移状态栏的高度。要做到效果统一。需要将安卓的Bar的paddingTop属性设为状态栏高度

import {StatusBar, Platform} from "react-native";
navigationOptions = {
  ...
  headerStyle: {
      ...
      paddingTop: Platform.OS === "ios" ? 0 : StatusBar.currentHeight,
    },
 }

另外横屏后，iOS的横屏时navigation bar的高度只有32px 而安卓的不会改变

或者

使用React-Navigation 中的SafeArea ,将 包裹在根视图的最外层。此时视图是从状态栏下方开始布局的。