React-native 学习资料

 React-native学习心得 

一．相关网站: 

1. react-native中文网

2. react-native组件框架

1).NativeBase

2).ReactNativeElements

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;

    }

2.沉浸式（StatusBar）

3.网络部分（fetch）

4.页面跳转（react-navigation）

5.别人写好的阅读项目（Reading）

6.图标资源（react-native-vector-icons）

目前学到这里，后续会增加，敬请期待。