ReactNative与Android中的屏幕适配

前言：从开始接触rn到现在终于能写出点东西了，的确得为自己好好地点个赞 ，不管咋样，学习还是得继续啊，废话少说了，在rn中我们也需要对屏幕进行适配，但是rn中的适配貌似比android原生容易很多（不得佩服facebook那些大神哈，对android原生控件封装的太屌！）。

我们先看看rn中的屏幕适配（作为一个android程序员去做rn确实比ios程序员考虑的东西多一点点哈，嘻嘻～～）：
结合android的一些适配经验，我在rn中也封装了一个工具类
ScreenUtils.js：

/**
 * 屏幕工具类
 * ui设计基准,iphone 6
 * width:750
 * height:1334
 */
var ReactNative = require('react-native');
var Dimensions = require('Dimensions');
export var screenW = Dimensions.get('window').width;
export var screenH = Dimensions.get('window').height;
var fontScale = ReactNative.PixelRatio.getFontScale();
export var pixelRatio = ReactNative.PixelRatio.get();
const r2=2;
const w2 = 750/r2;``
const h2 = 1334/r2;
/**
 * 设置text为sp
 * @param size  sp
 * @returns {Number} dp
 */
export const DEFAULT_DENSITY=2;
export function setSpText(size:Number) {
    var scaleWidth = screenW / w2;
    var scaleHeight = screenH / h2;
    var scale = Math.min(scaleWidth, scaleHeight);
    size = Math.round((size * scale + 0.5) * pixelRatio / fontScale);
    return size;
}
/**
 * 屏幕适配,缩放size
 * @param size
 * @returns {Number}
 * @constructor
 */
export function scaleSize(size:Number) {
    var scaleWidth = screenW / w2;
    var scaleHeight = screenH / h2;
    var scale = Math.min(scaleWidth, scaleHeight);
    size = Math.round((size * scale + 0.5));
    return size/DEFAULT_DENSITY;
}

搞过rn的童鞋知道，rn中直接写宽高都是dp的，所以我们要以一个美工设计的ui基准来计算我们的宽高，数学不好哈，不过大概是这样的：
我们先定义好ui的设计基准：

/**
 * 屏幕工具类
 * ui设计基准,iphone 6
 * width:750
 * height:1334
 */
var ReactNative = require('react-native');
var Dimensions = require('Dimensions');
export var screenW = Dimensions.get('window').width;
export var screenH = Dimensions.get('window').height;
var fontScale = ReactNative.PixelRatio.getFontScale();
export var pixelRatio = ReactNative.PixelRatio.get();
const r2=2;
const w2 = 750/r2;``
const h2 = 1334/r2;
/**
 * 设置text为sp
 * @param size  sp
 * @returns {Number} dp
 */
export const DEFAULT_DENSITY=2;

然后获取到我们自己手机的屏幕宽高，生成一个百分比，然后算出在iphone6上的100px，在我们手机上是多少px，最后转换成dp设置在在我们布局的style中：

const styles = StyleSheet.create({
    container: {
        backgroundColor: 'white',
        justifyContent: 'space-between',
        flexDirection: 'row',
        paddingTop: ScreenUtils.scaleSize(22),
        paddingBottom: ScreenUtils.scaleSize(22),
        paddingRight: ScreenUtils.scaleSize(12),
        paddingLeft: ScreenUtils.scaleSize(12),
        alignItems: 'center'
    },
});

好啦～！！，rn上的适配就完啦，是不是soeasy呢？？？

但是在android原生中，我们写布局大多数都是在xml中写的，所以我们在写布局的时候，压根就不知道我要运行在什么手机上，所以android官方建议我们使用dp啊，然后建很多layout文件啊，很多value文件啊，是的！我个人也是比较推崇官方的做法的，效率高，清晰明了，好啦！！除了android官方说的那种方法，我们是否也可以像rn一样运行后再重新算出百分比，然后再布局呢？答案是肯定的，因为rn就是一个例子，它也是对原生控件封装过的，所以才能用js轻易控制，在此之前鸿洋大神也对百分比布局做了封装，也对齐做了很详细的解析了，先贴上大神的博客链接：
[http://blog.csdn.net/lmj623565791/article/details/46767825](http://blog.csdn.net/lmj623565791/article/details/46767825

好啦！我们今天要做的也就是在百分比布局的基础上简单封装下，然后使得其能够像rn一样，直接写上美工标的px就能完美适配大部分手机了。

先上张运行好的效果图（效果还是很不错的！）：

布局文件：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ffffff"
    tools:context="com.example.leo.textdemo.MainActivity">

    <com.yasin.px_percent_layout.PercentLinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
        <TextView
            android:layout_width="0dp"
            android:layout_height="0dp"
            app:layout_widthPercent="10%w"
            app:layout_heightPercent="10%h"
            android:text="10%w,10%h"
            android:background="#ff0000"
            android:textColor="#fff"
            />
        <TextView
            android:layout_width="0dp"
            android:layout_height="0dp"
            app:layout_widthPercent="20%sw"
            app:layout_heightPercent="20%sh"
            android:text="屏幕宽的20%sw,屏幕高的20%sh"
            android:background="#ffff00"
            android:textColor="#ff00"
            />
        <TextView
            android:layout_width="0dp"
            android:layout_height="0dp"
            app:layout_widthPercent="200px"
            app:layout_heightPercent="200px"
            android:text="iphone6为基准的宽：200px，高：200px"
            android:background="#0000ff"
            android:textColor="#fff"
            />
        <TextView
            android:layout_width="0dp"
            android:layout_height="0dp"
            app:layout_widthPercent="375px"
            app:layout_heightPercent="375px"
            android:text="iphone6为基准的宽：370px，高：370px,textsize为28px"
            android:background="#00ff00"
            app:layout_textSizePercent="28px"
            android:textColor="#ff00"
            />

    </com.yasin.px_percent_layout.PercentLinearLayout>
</RelativeLayout>

先走一遍百分比布，看它到底是咋实现适配的(以下是来自鸿洋大神封装过后的代码，我就直接拿走解析了，嘻嘻！！)：

PercentLinearLayout.java:

package com.yasin.px_percent_layout;

import android.app.Activity;
import android.content.Context;
import android.content.res.TypedArray;
import