ReactNative学习笔记

生命周期

constructor 只调用一次
componentWillMount 只调用一次，在该方法内调用setState方法改变值不会重新渲染，因为第一次渲染都还没执行过，一般从该方法中读取缓存。
render()第一次render会在componentWillMount和componentDidMount之间调用
componentDidMount 只调用一次，在组件被渲染完毕后会马上执行该方法，同时子组件也有该方法，并且子组件的该方法优先于父组件执行，一般用于显示默认视图后从网络获取数据
componentWillReceiveProps(props) 在组件被初始化渲染完毕后如果接受到新的props时会调用该方法，
注意第一次传入的参数不会触发该方法，如果在该方法中调用setState，不会理解渲染视图，而会等到该方法执行完毕后再执行
shouleComponentUpdate(props,state) 该方法用于判断是否需要重新渲染视图，返回true表示需要重新渲染，否则不重新渲染，默认情况下是返回true
componentWillUpdate(nextprops,nextstate) 该方法在组件初始化渲染完毕后，重新渲染前调用，该方法中不能再次调用setState()
componentDidUpdate(prevprops,prevstate) 该方法在重新渲染后调用，参数为重新渲染前的props与state
componentWillUnmount() 该方法在组件即将被卸载前调用一般用来释放一些被占用的资源

布局相关

position的取值有以下两项
1. absolute 相对于父布局，对应的属性有top、left、bottom、right表示举例父布局的最左、右、顶、底多少pt
2. relative 相对于最近一个兄弟布局，需要使用left、top来指定位置
flexDirection有以下四种值，当修改了父布局或者兄弟布局的flexDirection时根据position定位的view还是在原来的位置
1. row 左到右
2. row-reverse 右到左
3. column 上到下默认
4. column-reverse 下到上
flexWrap 有以下两个取值
1. nowrap 不自动换行，显示不下的就不显示默认
2. wrap 自动换行，显示不下的换行、换列显示
justifyContent 决定与主轴平行方向的布局
alignItems 决定与主轴垂直方向的布局，当不设置时默认为stretch，当内部的View不设置height会自动将其高度拉伸至父布局的高度，当设置其他值时如果子View没设置高度则不显示
flex其取值范围为-1，0，以及任意正值
alignSelf 子View可以设置该值来覆盖父View的alignItems
zIndex 该值越大离用户越近
borderStyle 有三种取值[solid,dotted,dashed] 该属性需要与borderRadius配合才有效果
Text组件可以进行嵌套并且内层的Text会继承外层的Text的Style
写样式时要尽量写在StyleSheet.create中有点是StyleSheet API会对样式进行检查。
如果要把Text要垂直居中显示在一个布局中时，必须要给Text组件套一层View不然Text是没法做到垂直居中的因为textAlign属性只能做到水平居中
当不指定Text的fontSize时该值为13
如果需要让TextInput可以输入多行需要设置numberOfLines已经multiline = {true}
TextInput的父布局设置了alignItems ios不生效解决办法是在TextInput外面再套一层无任何属性的父布局
在Text中间显示图片

<Text>
    我是<Image style={xxx} source={xxx}/>文字
</Text>

四种可触摸组件一般使用第三种

TouchableNativeFeedback android系统独有，有点炫的动画效果

<TouchableNativeFeedback background={TouchableNativeFeedback.Ripple('red',true)}>
   <View style={{height:100,width:100,backgroundColor:'grey'}}></View>
</TouchableNativeFeedback>

TouchWithoutFeedback 能获取到点击事件但是点击后没有任何改变
TouchableOpacity 点击后会改变透明度
TouchableHighLight 比较难用

杂项

render中不要之间执行setState不然会导致死循环，不停的render
在RN中如果该文件有JSX语句那么必须import React from ‘react’，因为JSX会被系统转化成React.createElement()
setState是一个异步操作，所有其拥有callback，在执行完setState后会执行callback
一个循环生成的组件需要拥有不同的key，不然回报黄色警告，其目的的为了在循环改变的时候不重复渲染key值相同的组件，如果不加key当循环头部发生变化时会直接导致整个列表重新渲染
不光是组件才能以标签形式在JSX中使用，一个方法也能以组件形式使用

const FunctionText = (props) => {
    return <Text>{`My name is ${props.name}`}</Text>;
};
class xxx extends Component{
    render() {
        return {
            <FunctionText />
        }
    }
}

在对标签传值时，如果所传值是字符串类型不要使用大括号，直接使用双引号引起来传入就行，其他属性全都用{}括起来
自定义组件时组件名首字母必须大写，用的时候也必须大写不然会报错
取消debug状态下的黄色警告

console.disableYellowBox = true;

使用global设置的方法和属性全局都可用
promise的使用方法

    let promise = new Promise((resolve,reject) => {
        //假设三秒后网络请求超时
        setTimeout(() => {
          reject('异常信息...');
        },3000);
    });
    promise.then(() => {
      ToastAndroid.show('then执行了',ToastAndroid.SHORT);
    }).catch((e) => {
      ToastAndroid.show(`catch执行了${e}`,ToastAndroid.SHORT);
    });

使用Object.assign()可以创建把原对象中的所有属性拷贝到目标对象中，但是该方法属于浅拷贝，如果源对象中的某个属性是对象A，目标对象中的该属性也是对象A，两者将同时拥有该对象的引用
通过1/PixelRatio.get()获取到的是一个像素
读取本地json文件内容，比如读取package.json 的name属性

let packageObj = require('../../package') //路径
packageObj.name //直接获取

保存数据到本地并读取使用AsyncStorage

 AsyncStorage.setItem('key','value').then({
 })//要求是字符类型
 AsyncStorage.getItem().then((result) => {
 })
 AsyncStorage.multiSet([['1','张三'],['2','李四'],['3','王五']]).then(() => { //键值对数组
            Alert('title','success')
        }).catch((error) => {
            Alert('title',error);
        })
 AsyncStorage.multiGet(['1','2']).then((result) => {
            Alert.alert('title',result[0][0]);
        })

新安装一个js库时可以通过npm install ooxx –save来安装并且自动添加依赖到package.json中
加载本地图片使用require(‘xxx’) 是在编译时获取图片资源的，不能够动态改变图片
可以给组件设置ref属性，然后可以通过this.refs.xxx获取该组件的引用
通过Clipboard API可以设置粘贴板内容以及设置粘贴板内容

Clipboard.setString(this.text); //设置内容
Clipboard.getString().then((text) => { //这个是异步的
     console.log(text);
})

通过以下方式可以把当前组件的style传递给AComponent

<AComponent {...this.props}></AComponent>

RN的Image组件可以调用客户端的图片资源进行显示，如下所示

let nativeImageSource = require('nativeImageSource');
let ades = {
            android:'gh_cm_gh_guide_00',
            width:200,
            height:200
        };
<Image source={nativeImageSource(ades)}/>

属性确认

自定义组件的时候能用到，限制了外界传入的参数、类型，当外界传入错误的参数类型会显示警告，比如定义如下属性若外界使用WaitDialog时传入的time不是number则会出现下图中的异常

static propTypes = {
    time: React.PropTypes.number
};

这里写图片描述
* 一些PropTyps
1. React.PropTypes.number 数字
2. React.PropTypes.array 数组
3. React.PropTypes.bool 布尔
4. React.PropTypes.func 方法
5. React.PropTypes.object 对象
6. React.PropTypes.string 字符串
7. React.PropTypes.node 数字、数字数组、字符串、字符串数组
8. React.PropTypes.element 某个React元素
9. React.PropTypes.instanceOf(className) 某个class实例
10. React.PropTypes.oneOf([‘值1’,’值2’]) 数组中的某个值
11. React.PropTypes.oneOfType([React.PropTypes.number,React.PropTypes.bool]) 数组中的某种类别
12. React.PropTypes.objectOf(React.PropTypes.number) 要求对象中必须含有一个该类型的变量
13. React.PropTypes.any 可以是任何类型

在任意一个PropType后面都可以跟上.isRequired来声明该参数是必须传递的，如果外界使用该组件是未传递该参数则会出现如下警告
自定义组件为某些参数设置默认值，如下所示这样当外界使用WaitDialog时如果没有传递该属性，组件内部会默认使用该属性。

class Test extends React.Component{
    static defaultProps = {
        name:'hfw'
    }
    render() {
        return <Text>{`My name is ${this.props.name}`}</Text>
    }
}