React框架
中小应用使用mobx大型应用使用redux
生命周期
constructor 只调用一次componentWillMount 只调用一次，在该方法内调用setState方法改变值不会重新渲染，因为第一次渲染都还没执行过，一般从该方法中读取缓存。render()第一次render会在componentWillMount和componentDidMount之间调用componentDidMount 只调用一次，在组件被渲染完毕后会马上执行该方法，同时子组件也有该方法，并且子组件的该方法优先于父组件执行，一般用于显示默认视图后从网络获取数据componentWillReceiveProps(props) 在组件被初始化渲染完毕后如果接受到新的props时会调用该方法， 注意第一次传入的参数不会触发该方法，如果在该方法中调用setState，不会理解渲染视图，而会等到该方法执行完毕后再执行shouleComponentUpdate(props,state) 该方法用于判断是否需要重新渲染视图，返回true表示需要重新渲染，否则不重新渲染，默认情况下是返回truecomponentWillUpdate(nextprops,nextstate) 该方法在组件初始化渲染完毕后，重新渲染前调用，该方法中不能再次调用setState()componentDidUpdate(prevprops,prevstate) 该方法在重新渲染后调用，参数为重新渲染前的props与statecomponentWillUnmount() 该方法在组件即将被卸载前调用一般用来释放一些被占用的资源
布局相关
position的取值有以下两项
absolute 相对于父布局，对应的属性有top、left、bottom、right表示举例父布局的最左、右、顶、底多少ptrelative 相对于最近一个兄弟布局，需要使用left、top来指定位置flexDirection有以下四种值，当修改了父布局或者兄弟布局的flexDirection时根据position定位的view还是在原来的位置
row 左到右row-reverse 右到左column 上到下 默认column-reverse 下到上 flexWrap 有以下两个取值
nowrap 不自动换行，显示不下的就不显示 默认wrap 自动换行，显示不下的换行、换列显示justifyContent 决定与主轴平行方向的布局alignItems 决定与主轴垂直方向的布局，当不设置时默认为stretch，当内部的View不设置height会自动将其高度拉伸至父布局的高度，当设置其他值时如果子View没设置高度则不显示flex其取值范围为-1，0，以及任意正值alignSelf 子View可以设置该值来覆盖父View的alignItemszIndex 该值越大离用户越近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>
ReactNative动画
一般用法，下方代码运行会显示一个从左下角移动到中间的文字，并且从完全透明到完全不透明，首先需要创建了一个Animated.Value对象赋于初始值，然后在指定位置调用Animated.timing().start开启动画，并且该动画不同于Android里面的普通动画，它是实实在在改变了属性
constructor(props) {
super(props);
this.state = {
animateValue:
new Animated.Value(
0)
};
}
componentDidMount() {
Animated.timing(
this.state.animateValue,{
toValue:
1,
duration:
3000,
easing:Easing.back(),
}).start
((obj) => {
SRNNative.toast('返回:' + obj.finished);
});
}
<Animated.View style={[{opacity:this.state.animateValue,
transform:[{
translateX:this.state.animateValue.interpolate({
inputRange:[0,0.2,0.4,1],
outputRange:[150,149,148,0]
})}, {
translateY:this.state.animateValue.interpolate({
inputRange:[0,1],
outputRange:[200,0]
})}
]},styles.container]}>
<TouchableOpacity onPress={this.onPress}><Text>动画文本</Text></TouchableOpacity>
</Animated.View>
可以使用Animated.Value修饰style的组件有Animated.View、Animated.Image、Animated.ScrollView其声明代码如下所示，因此使用自定义组件时可以使用以下方法进行转换。
//Animated.js
var AnimatedImplementation =
require(
'AnimatedImplementation');
var Image =
require(
'Image');
var Text =
require(
'Text');
var View =
require(
'View');
var ScrollView =
require(
'ScrollView');
module.
exports = {
...AnimatedImplementation,
View: AnimatedImplementation.createAnimatedComponent(View),
Text: AnimatedImplementation.createAnimatedComponent(Text),
Image: AnimatedImplementation.createAnimatedComponent(Image),
ScrollView: AnimatedImplementation.createAnimatedComponent(ScrollView),
};
const MyCompo = Animated.createAnimatedComponent(MyComponent);
四种可触摸组件 一般使用第三种
TouchableNativeFeedback android系统独有，有点炫的动画效果
<TouchableNativeFeedback background={TouchableNativeFeedback.Ripple('red',true)}>
<View style={{height:100,width:100,backgroundColor:'grey'}}></View>
</TouchableNativeFeedback>
TouchWithoutFeedback 能获取到点击事件但是点击后没有任何改变TouchableOpacity 点击后会改变透明度TouchableHighLight 比较难用
杂项
Object.value()可以把一个对象转化成一个数组如果只是单纯的浅拷贝一个数组可以不要使用Object.assign()，推荐使用{…obj}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>
}
}
