React Native 小技巧(最新总结)

0.946字数 611阅读 270

序言

最近写了几个项目,也重构了一些老项目,架构也换了,项目直接从很老的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 新框架链接:

米家老框架ios-rn-sdk;

米家新框架miot-plugin-sdk;

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

推荐阅读更多精彩内容