React-native学习心得
一．相关网站:
2. react-native组件框架
1).NativeBase
3. Github
二．学习方向：
1.屏幕适配：
工具类如下：
/**
* Created by zhuoy on 2017/6/27.
* 屏幕工具类
* ui设计基准,1920*1080
* width:1080
* height:1920
*/
/*
设备的像素密度，例如：
PixelRatio.get() === 1 mdpi Android 设备 (160 dpi)
PixelRatio.get() === 1.5hdpi Android 设备 (240 dpi)
PixelRatio.get() === 2 iPhone 4, 4S,iPhone 5, 5c, 5s,iPhone 6,xhdpi Android 设备 (320 dpi)
PixelRatio.get() === 3 iPhone 6 plus , xxhdpi Android 设备 (480 dpi)
PixelRatio.get() === 3.5Nexus 6 */
import {
Dimensions,
PixelRatio,
} from 'react-native';
export const deviceWidth = Dimensions.get('window').width; //设备的宽度
export const deviceHeight = Dimensions.get('window').height;//设备的高度
let fontScale = PixelRatio.getFontScale(); //返回字体大小缩放比例
export let pixelRatio = PixelRatio.get(); //当前设备的像素密度
const defaultPixel = 2; //iphone 6
//px转换成dp
export const w2 = 750 / defaultPixel;
export const h2 = 1334 / defaultPixel;
export const scale = Math.min(deviceHeight / h2, deviceWidth / w2); //获取缩放比例
/**
* 设置text为sp
* @param size sp
* return number dp
*/
export function setSpText(size:number) {
size = Math.round((size * scale + 0.5) * pixelRatio / fontScale);
return size / defaultPixel;
}
/**
* 设置组件宽高
* @param size sp
* return number dp
*/
export function scaleSize(size:number) {
size = Math.round(size * scale + 0.5);
return size / defaultPixel;
}
状态栏适配：由于android系统问题，导致了屏幕的可用高度是不一致的，有时候在不同机型上，屏幕分配给UI的高度是不一样的，有时候需要用屏幕可用高度需要去除状态栏的部分。
导航栏：部分国产手机有实体导航栏，这点屏幕高度就和实际高度一致；；另一部分有虚拟按键的导航栏，这样屏幕实际高度就和屏幕出厂高度不一致，适配的时候尤其注意。（这个问题会导致android单位用dp时，同样像素的手机，同样宽高比，dpi不一致）
2.沉浸式（StatusBar）：沉浸式一开始就是于ios上使用，ios的沉浸式适配可能只需要注意ihoneX 手机，但是在Android 上面会有一些衍生问题。
android系统版本问题：在android5.0版本以下，达不到沉浸式，若要强行沉浸式，需要其他比较复杂的方法。然而android6.0之前，状态栏的字体是白色的，6.0之后，字体可以改成黑色（部分国产手机如小米，android5.0的版本也可以改颜色，这个不多说明）
3.网络部分（fetch）
4.页面跳转（react-navigation）
5.别人写好的阅读项目（Reading）
6.图标资源（react-native-vector-icons）
7.这是一个本地持久存储的封装（react-native-storage）
8.数据加密（node-forge）
9.加载GIF
用RN系统组件<Image>,这个在ios上貌似是没啥问题，在android上一般是显示静态的图片，gif加载异常，产生的原因是android 上缺少加载gif的库。对于不同版本的RN，引入库的方式不一样（android引入库的方式：在module下的build.gradle下引入第三方库）：
目前学到这里，后续会增加，敬请期待。
