序言
最近写了几个项目，也重构了一些老项目，架构也换了，项目直接从很老的0.25 直接跨到0.54.4版本了；
在项目的重构和重新设计中也从中学到了一些东西和技巧，因为一直忙，所以没有时间写博客，所以.....今天终于抽出来时间写了，不啰嗦直接上代码，直接输出干货，不懂的老铁可以私信我;
吧啦吧啦一大堆;
1.升级到0.54.4 出现很多兼容性问题（这么解决）
公司的React Native项目 0.25.1升级 到0.54.4 版本，出现了很多兼容性问题，之前是ES5写的,索性我直接把整个项目换到了ES6，剩下的就是换新框架的API 然后梳理逻辑，（米家私有API）我就不介绍了，对你们帮助不大，毕竟你们公司不会用到这些东西，但是我还是提供了github 的链接给你们，如果你们有兴趣可以了解一下；
举个例子
var React = require('react-native');
var {
Image,
ListView,
TouchableHighlight,
StyleSheet,
Text,
View,
} = React;
var DemoPage = React.createClass({
propTypes: {
params1:React.PropTypes.object,
params2:React.PropTypes.bool,
params3:React.PropTypes.func,
params4:React.PropTypes.number,
},
getDefaultProps() {
return {
params1:'Default_one',
params2:'Default_two',
params3:'Default_three',
params4:'Default_four',
};
},
getInitialState() {
return {
params1:'one',
params2:'two',
params3:'three',
params4:'four',
}
},
componentWillMount: function() {
},
componentDidMount: function(){
},
componentWillUnmount: function(){
},
attributeOne:10,
attributeTwo:[],
/* 这两个一般在方法里通过this调用 比如（ this.attributeOne ）*/
render:function(){
return(
<View style={{flex:1,backgroundColor:'#ffffff'}}>
<Text>{this.state.params1}</Text>
<Text>{this.state.params2}</Text>
<Text>{this.state.params3}</Text>
<Text>{this.state.params4}</Text>
</View>)
},
loadData: function(){
/*
获取数据等其它方法
*/
},
});
module.exports = DemoPage;
升级RN 版本后对应的改造方法（ES6）
import React,{component} from 'react' ;
import {
Image,
ListView,
TouchableHighlight,
StyleSheet,
Text,
View,
} from 'react-native';
DemoPage.getDefaultProps = {
params1:'Default_one',
params2:'Default_two',
params3:'Default_three',
params4:'Default_four',
}
export default class DemoPage extends React.Component{
static propTypes= {
params1:React.PropTypes.object,
params2:React.PropTypes.bool,
params3:React.PropTypes.func,
params4:React.PropTypes.number,
}
/*
getInitialState 改成 constructor构造方法
*/
constructor(props){
super(props);
this.state = {
params1:'one',
params2:'two',
params3:'three',
params4:'four',
},
this.attributeOne=10;
this.attributeTwo=[];
}
componentWillMount() {
}
componentDidMount(){
}
componentWillUnmount(){
}
render(){
return(
<View style={{flex:1,backgroundColor:'#ffffff'}}>
<Text>{this.state.params1}</Text>
<Text>{this.state.params2}</Text>
<Text>{this.state.params3}</Text>
<Text>{this.state.params4}</Text>
</View>)
}
loadData(){
/*
获取数据等其它方法
*/
}
}
米家RN 新框架链接：
1.Props：小技巧
class CheckLink extends React.Component{
render(){
// 这样会把 CheckList 所有的 props 复制到 <aElementView>
return <ElementView {...this.props}>{'props内容拼接'}{this.props.children}</ElementView>;
}
}
2.propTypes：校验
可以声明 prop 为指定的 JS 基本类型。默认情况下，这些 prop 都是可传可不传的
static propTypes= {
params1:React.PropTypes.bool,
params2:React.PropTypes.func,
params3:React.PropTypes.number,
params4:React.PropTypes.object,
params5:React.PropTypes.string,
params6:React.PropTypes.element,
}
所有可以被渲染的对象：数字，字符串，DOM 元素或包含这些类型的数组。
params_Node:React.PropTypes.node,
指定props 为React 元素
optionalElement: React.PropTypes.element,
用 JS 的 instanceof 操作符声明 prop 为某种类的实例
optionalMessage: React.PropTypes.instanceOf(Message),
用 enum 来限制 prop 只接受指定的值
optionalEnum: React.PropTypes.oneOf(['News', 'Photos']),
指定的多个对象类型中的一个
optionalUnion: React.PropTypes.oneOfType([
React.PropTypes.string,
React.PropTypes.number,
React.PropTypes.instanceOf(Message)
]),
指定类型组成的数组
optionalArrayOf: React.PropTypes.arrayOf(React.PropTypes.number),
指定类型的属性构成的对象
optionalObjectOf: React.PropTypes.objectOf(React.PropTypes.number),
特定形状参数的对象
optionalObjectWithShape: React.PropTypes.shape({
color: React.PropTypes.string,
fontSize: React.PropTypes.number
}),
以后任意类型加上
isRequired来使 prop 不可空
requiredFunc: React.PropTypes.func.isRequired,
不可空的任意类型
requiredAny: React.PropTypes.any.isRequired,
3.常用的常量定义技巧
因为开发中，基本要用到页面适配，机型适配，不可避免的 要用到屏幕宽度、屏幕高度、导航头高度、是否是iphoneX、iphone X底部安全距离等常量，所以.... 嘿嘿嘿,定义一个常量的类，然后导出即可
import React from 'react';
import {
Platform,
Dimensions,
} from 'react-native';
const isIPX = (Dimensions.get('window').height>=1218)?(true):(false);
const APPBAR_HEIGHT = Platform.OS === 'ios' ? 44 : 56;
const ScreenWidth = Dimensions.get('window').width;
const ScreenHeight = Dimensions.get('window').height;
var ConstDefine = {
/* navigator 高度*/
APPBAR_HEIGHT: APPBAR_HEIGHT,
/* 导航头 高度*/
NavigatorBarHeight: (isIPX==true)?(44+64):(APPBAR_HEIGHT +20),
/* iphone X 顶部安全区域高度 */
APPBAR_MARGINTOP: (isIPX==true)?(44):(0),
/* iphone X 底部安全区域高度 */
APPBAR_MARGINBOTTOM: (isIPX==true)?(34):(0),
/* 是否是iphone X */
isIPX:isIPX,
/* 屏幕宽 */
screenWidth:ScreenWidth,
/* 屏幕高 */
screenHeight:ScreenHeight,
ratio:ScreenWidth / 375,
}
module.exports = ConstDefine;
/* 在别的页面，引用即可,统一适配 */
import {
APPBAR_HEIGHT,APPBAR_MARGINBOTTOM,APPBAR_MARGINTOP,isIPX ,
ratio,NavigatorBarHeight,screenWidth,screenHeight} from '../ConstDefine';
4.react-native 常用命令
npm install xxxx —save (xxxx为库的名字)
react-native start --port 9999
1.5 React Native 打包
正常进入RN工程的根目录 在
Terminal终端 输入以下命令 得到index.ios.jsbundle和assets资源文件-
将
index.ios.jsbundle和assets资源拖进工程，并确保assets文件夹为蓝色(正确引用)才可以；react-native bundle --entry-file index.js --platform ios --dev false --bundle-output ./ios/bundle/index.ios.jsbundle --assets-dest ./ios/bundle
1.6 React Native Navigation 导航头设置
static navigationOptions = {
title: 'OC和React-Native交互', // 设置头部标题
headerStyle:{
backgroundColor:'#F7D05E', //设置NavigationBar背景色
},
headerTintColor: '#fff',//设置Tint颜色
headerTitleStyle: {
fontWeight: 'bold',// 设置中间Title 的样式
},
headerTransparent: true,// 设置NavigationBar 透明
};
