React Native之基础篇

React Native 介绍

一、Native的类别

    React Native 编译后是原生应用，v0.22.0热更新hot reloading

    Hybrid  混合应用

    phoneGap 包皮应用，一次编写，到处运行，依然是网页，只是将页面内容内嵌到webView中，用中间件来对网页进行通信，对一些动画会有性能上的问题


二、实时加载（Live Reload）和热加载（Hot Reload）的区别

    http://www.jianshu.com/p/1fa6e9c0799f

    Enable Live Reload  实时加载，应用于更新时需要刷新当前页面，可以看到全局刷新效果

    Enable Hot Reloading   热加载，当布局修改时会自动更新模拟器，看不出来刷新效果类似买局部刷新

三、React Native 应用部署/热更新 codePush

    http://blog.csdn.net/fengyuzhengfan/article/details/52003798

安装

1、安装 XCode

    $ xcode-select --install  检查xcode是否安装, 如果未安装会出现提示

    android 下载 android studio  https://developer.android.google.cn/index.html


2、安装 homebrew

    用于包管理，与npm类似

    $ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

    $ sudo chown -R `whoami` /usr/local   解决/usr/local目录不可写的权限问题  

    Homebrew将工具安装到 /usr/local/Cellar 目录中，并在 /usr/local/bin 中创建符号链接。


3、安装 watchman 和 flow

    watchman是facebook的开源项目用于监视文件并且记录文件的改动情况

    flow 是js的静态类型检查器，用于找出js代码中的类型错误

    $ brew install watchman

    $ brew install flow


4、安装 NodeJS

5、安装 react-native 

    $ npm install -g react-native-cli      // Yarn是Facebook提供的替代npm的工具，可以加速node模块的下载

6、vscode中react-native插件

初始化项目

1、创建项目

    $ react-native init 项目名  // 创建项目

    $ react-native run-ios     // 运行 react-native run-ios --simulator "iPhone 4s"  定义模拟器类型

        或者在ios目录 AwesomeProject.xcodeproj  双击打开


2、查看命令

    $ react-native -h   所有命令

    $ react-native -v   版本


3、安装第三方插件

    $ npm i react-native-elements lodash query-string sha1 react-native-audio react-native-video react-native-image-picker react-native-progress react-native-sk-countdown react-native-swiper react-native-barcodescanner --save


4、link 命令

    link的原因：以下组件都是原生开发，wrapper了一层js，因此需要link .a到project中

    $ react-native link

    或 rnpm link     需要先安装rnpm     npm install rnpm -g --save-dev


5、模拟器调试技巧

    http://blog.csdn.net/quanqinyang/article/details/52215652  

    # 模拟器打开后可以通过cmd+1/2/3/4来调整窗口大小

    # 模拟器在所有窗口置顶 window -> stay in front

    # ISO cmd + D 打开调试菜单，Android cmd + M

    # comond + T  show Animate 呼出菜单cmd+D会变成慢动画


    # Reload 重新bundle代码 cmd + R

    # Debug JS Remotely   调试模式 chrome Developer Tools调试

    # Enable Live Reload  实时加载，应用于更新时需要刷新当前页面，可以看到全局刷新效果

    # Enable Hot Reloading   热加载，当布局修改时会自动更新模拟器，看不出来刷新效果类似买局部刷新


    # 警告

        红错误 - console.error('')

        关闭警告 - console.disableYellowBox = true;    显示警告 - console.warn('YellowBox is disabled.');

    # 日志 - react-native log-ios      react-native log-android

    # chrome开发工具 - debug js Remotely  可以跟进代码

react-native 目录

.
├── .DS_Store
├── .babelrc            // ES6转换的配置
├── .buckconfig
├── .flowconfig         // 做js代码类型检查 
├── .watchmanconfig     // 监听文件改变watchman的配置
├── .gitattributes
├── .gitignore          // 对哪些文件被git忽略不显示
├── node_modules        // 存储资源包    
├── __tests__
├── android             // android原生文件目录
├── ios                 // ios的原生文件目录 运行reactNative会将文件打包到这个目录，然后xcode调用的就是这里的项目文件
├── app.json
├── index.android.js    // android文件入口
├── index.ios.js        // ios文件入口
├── package.json        // 依赖文件
└── yarn.lock

AppRegistry 注册模块，用来告诉RN哪个组件被注册为根窗口

AppRegistry是js运行RN应用的入口，通过registerComponent()来注册方法

AppRegistry.registerComponent('项目名', () => 入口组件名)  注册入口

AppRegistry.runApplication 来真正运行应用

React Native 生命周期

第一阶段，初始化

    getDefaultProps -> getInitialState -> componentWillMount -> render -> componentDidMount

       获取配置参数        获取初始状态值         通知要开始渲染        渲染       告诉组件已经完成


第二阶段，运行阶段 组件运行中

    1、state变化 -> shouldComponentUpdate -> componentWhllUpdate ->  render -> componentDidUpdate

       状态变化    判断组件是否要更新true/false     需要更新就触发           渲染         更新组件

    2、props变化 -> componentWillReceiveProps -> shouldComponentUpdate -> componentWhllUpdate ->  render -> componentDidUpdate

       props变化         属性改变调用             判断组件是否要更新true/false       需要更新就触发        渲染           更新组件


第三阶段 卸载

    unmount -> componentWillUnmout -> 结束

组件生命周期

props、state

一、props属性: 父组件传值给子组件

    <Greeting name='Rexxar' />      父组件调用子组件

    <Text>Hello {this.props.name}!</Text>   子组件接收

    1、defaultProps定义默认的props

        class Smiple extends Component{
            static defaultProps = {     // 定义默认props静态属性
                name: 'siguang'
            }

            static propsTypes = {       // 检测props的类型
                name: 'String'
            }

            render(){
                return (
                    <View>
                        <Text> {this.props.name} </Text>
                    <View>
                )
            }
        }


二、state状态、setState()改变状态，组件中可以改变的值

    export default class rrdProject extends Component {
        constructor(props){
            super(props);

            // 定义state对象
            this.state = { 
                showText: ''
            }
        }

        // state = {  };     // RN也支持ES7 类的静态属性写法

        render() {
            return(
                <View style={styles.container}>
                    <Text>这里有内容: {this.state.showText}</Text>
                </View>
            );
        }
    }

ref

通过ref来获取真实的DOM

import childComponent from './childComponent';

class Simple extends Component {
    clickChild(){
        var size = this.refs.childRef.getSize();       // 获取childComponent组件的getSize()方法
    }

    render() {
        return (
            <View>
                <Text>Simple 基本页面</Text>
                <button onPress={this.clickChild} title="点击" />

                <childComponent ref="childRef" />
            </View>
        )
    }
}

样式

http://blog.csdn.net/sbsujjbcy/article/details/50017029
http://www.cnblogs.com/wonyun/p/5481134.html

1、直接写样式

    <View style={{width: 193, height: 110}}></View>     {{}} 两个括号可以直接写样式
    <View style={styles.red}></View>                    {} 一个括号需要来调用样式类
    const styles = StyleSheet.create({
        red: {
            color: red
        }
    })

2、写多个样式

    <Text style={[styles.btn, styles.color]}>立即体验</Text>

    // 支持表达式
    <Text style={[styles.btn, styles.color && this.props.dotColor]}>立即体验</Text>


2、styleSheet.create({}) 定义样式

    const styles = StyleSheet.create({
        rootView:{
            height: '100%',
            width: '100%',
            backgroundColor: '#eff0f3'
        },
        big: {
            color: 'blue',
            fontSize: 30
        }
    })
    <View style={styles.rootView}>      // 多个样式 style={[styles.rootView, styles.big]}
        <Text>REACT NATIVE ELEMENTS</Text>
    </View>


3、颜色支持

    '#ccc'、 'rgba(0,0,0,.4)'、 'transparent'、 'red'


4、RN样式与css样式的异同

    View类型div，会默认占用窗口的100%宽度

    绝对定位和相对定位不需要父元素设置positioin，也没有zIndex配置

    不能将RN的inline元素设置maginTop、marginBottom

    样式继承只存在Text元素内的Text元素

        <Text style={{color:'red'}}>
             <Text>父：我是white还是red{'\n'}
                 <Text>子：那我是神马颜色</Text>
             </Text>
       </Text>

Flex布局

直接给组件指定宽、高   <View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
http://www.devio.org/2016/08/01/Reac-Native%E5%B8%83%E5%B1%80%E8%AF%A6%E7%BB%86%E6%8C%87%E5%8D%97/#和而不同

一、父视图属性:

    1、flexDirection('row', 'column','row-reverse','column-reverse')- 布局子元素的排列方向，默认是column不是row

        <View style={{flex: 1, flexDirection: 'row'}}>
            <View style={{flex:1, height: 50, backgroundColor: 'powderblue'}} />
            <View style={{flex:2, height: 50, backgroundColor: 'skyblue'}} />
            <View style={{flex:3, height: 50, backgroundColor: 'steelblue'}} />
        </View>

        重要:  
            <View style={{flex: 1, flexDirection: 'row'}}>  
            父组件没设置flexDirection=row，默认布局为列，子组件设置flex:1是没用的，子组件只能设置width
            父组件设置为flexDirection=row，子组件可以设置flex:1

    2、flexWrap ('wrap', 'nowrap') - 定义子元素是否允许多行排列

    3、justifyContent ('flex-start', 'flex-end', 'center', 'space-between', 'space-around') - 定义子元素如何对齐

    4、alignItems ('flex-start', 'flex-end', 'center', 'stretch') - 定义子元素在侧轴对齐的


    justifyContent - 子元素沿主轴的排列方式

        justifyContent: flex-start、center、flex-end、space-around以及space-between
        <View style={{ flex: 1,  flexDirection: 'row' justifyContent: center}}>

    alignItems - 


二、子视图属性：

    1、alignSelf ('auto', 'flex-start', 'flex-end', 'center', 'stretch') - 

    2、flex -

网络请求

RN里网络请求分为: Fetch、WebSocket、XMLHttpRequest

事件

onPress: 点击

onLongPress: 长按

maximumZoomScale和minimumZoomScale: 双指缩放

http://reactnative.cn/docs/0.42/panresponder.html

动画

1、LayoutAnimation 用于全局的布局动画

2、Animated 用于创建更精细的交互控制的动画

    Animated 封装了四个可以动画的组件: View、Text、Image和ScrollView

    start/stop 方法来控制动画按顺序执行

定时器

setTimeout, clearTimeout
setInterval, clearInterval
setImmediate, clearImmediate
requestAnimationFrame, cancelAnimationFrame

RN与原生通信

http://blog.csdn.net/zww1984774346/article/details/71167775

rn与IOS原生通信的三部分

    1、属性        2、原生模块      3、原生UI组件封装

    原生要写到AppDelegate.m文件中

    # 属性是最简单的跨组件通信，从原生组件传递属性到React Native 或 React Native到原生组件

        原生中添加imageList:

            NSArray *imageList = @[@"https://facebook.github.io/react/img/logo_og.png",
                        @"https://facebook.github.io/react/img/logo_og.png"];

            NSDictionary *props = @{@"images" : imageList};

            RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
                                        moduleName:@"AwesomeProject"
                                        initialProperties:props             // 这里initialProperties:props]传递给RN
                                        launchOptions:launchOptions];

        RN中接收与props传值一样:

            <View>
                {
                    this.props.images.map(function(items){
                        return <Image 
                            source={{uri:items}} 
                            style={{width:100,height:100}}></Image> 
                    })
                }
            </View>


1、RN访问OC

    // 创建原生模块实例
    var NativeModule = require('react-native').NativeModules.NativeTest;

    // 调用原生的doSomething()方法
    NativeModule.doSomething('ReactNative');


2、OC访问RN

http://www.jianshu.com/p/9d7dbf17daa5

生成测试包

iOS—最全的真机测试教程   http://www.cocoachina.com/ios/20160711/17004.html

团队开发的Xcode配置和生成包

    xCode -> Preferencse -> Accounts -> + 填加 选择 add apple ID 将账号和密码输入

    点击工程目录 -> General 
        -> Identity面板下的 Bundle Identifler 填写权限 “com.ucredit.paydayloan” 
        -> 在 Signing面板中的 Team 中选择"ZhongChengXingyu of......"

    将手机与mac连接，将Device选择当前手机设备，点击 运行，写读取设备成功后，在运行一次这次是执行build

原生组件

两种方法加载原生组件

1、react-native link 命令

    不仅会将第三方模块的原生组件代码链接入 Android/IOS 中，还会将字体等文件移动相应的目录中

2、通过Xcode来导入组件

    http://www.cnblogs.com/shaoting/p/6148085.html

3、Flow

    Flow是 Facebook出品的表态类型语言，可以将RN内部也支持ES 7的类属性的写法

        // 就可以不用在象ES 6将静态属性写到constructor中
        class MyComponent extends Component {
            constructor(props){
                super(props);

                // 私有属性
                this.isField = 1;   
                // state
                this.state = {
                    username: 'siguang'
                }
            }

            render(){
                return (
                    <View>
                        {this.username}
                    </View>
                )
            }
        }

        class MyComponent extends Component {
            isField = 1;
            state = {
                username: 'siguang'
            }

            render(){
                return (
                    <View>
                        {this.usernmae}
                    </View>
                )
            }
        }

调试

1、Command+R  重新刷新

2、Command+D  打开菜单 

3、Debug JS Remotely 用chrome浏览器调试,Alt+Command+j出现浏览器debug窗口

4、Disable Live Reload 时实刷新，代码修改保存后会就刷新

5、show Perf Monitor 打开FPS监控器

6、show Inspector 用于查看页面结构及属性

XCode装证书
http://www.cocoachina.com/ios/20160711/17004.html