前言

React Native的开发思路是通过组合各种组件来组织整个App，在大部分情况下通过组合View、Image等几个基础的组件，可以非常方便的实现各种复杂的跨平台组件，不过在需要原生功能支持、对性能有要求的情况下还是需要进行一定的原生的开发，合理的组件实现方式可以降低使用和跨平台的成本。

（底层实现分析参见：React-Native 渲染实现分析，本文仅讨论组件开发方法）

React Native组件开发

RN的组件开发有几种方式，JS组件、Native功能组件、NativeUI组件。JS组件是仅使用React Native自带的组件进行组合实现的组件，优势是跨平台方便，但受限于RN实现的效果，一些复杂需求无法实现。而Native组件要强大许多，不过需要考虑平台差异，提供统一的接口难度要大一些。

JS组件（熟悉React可略过）

JS组件是指仅靠RN本身自带的组件开发的组件，是RN下最基础的开发方式，大部分的组件都是JS组件。最大的好处是可以低成本的跨平台。JS组件的开发体验跟React（Web）一致，区别在基础标签不一样，以及样式定义方式不一样。

一个例子，无网络提示组件：

（例子语言Typescript）

// 组件的属性定义
interface PropsDefine {
    // 组件宽度
    width: number
    // 组件高度
    height: number
    // 点击刷新按钮回调，可选
    onClickRefresh?: () => void
}
export class NoNetwork extends React.Component<PropsDefine, {}> { // 组件无状态，定义为空：{}
    // 组件的默认属性定义，单例，实例间共享
    static defaultProps = {
        onClickRefresh: () => { }
    }

    constructor(props: PropsDefine) {
        super(props)
    }

    render() {
        let {width, height} = this.props

        return (
            <View style={[Styles.panel, {
                width: width,
                height: height,
            }]}>
                <View style={Styles.picBlock}>
                    <Image source={Styles.picUrl}/>
                </View>
                <View style={Styles.textBlock}>
                    <Text style={Styles.text}>你的网络好像不给力</Text>
                    <Text style={Styles.text}>点击按钮刷新</Text>
                </View>
                <TouchableOpacity style={Styles.button} onPress={this.props.onClickRefresh}>
                    <Text style={Styles.buttonText}>刷新</Text>
                </TouchableOpacity>
            </View>
        )
    }
}

跟端上组件开发一样，React组件也定义了组件的生命周期：

实例化

• getDefaultProps
  组件类型首次实例化时初始化默认props属性，多实例共享
• getInitialState
  实例化时初始化默认state属性
• componentWillMount
  在渲染之前触发一次
• render
  渲染函数，返回DOM结构
• componentDidMount
  在渲染之后触发一次

有需要重新渲染（props变更或者setState改变state时）

• componentWillReceiveProps
  组件接收到新的props时调用，并将其作为参数nextProps使用，可在此更改组件state
• shouldComponentUpdate
  判断是否需要更新组件（在首次渲染期间或者调用了forceUpdate方法后，该方法不会被调用）
• componentWillUpdate
  更新渲染前调用
• render
  渲染函数，返回DOM结构
• componentDidUpdate
  更新渲染后调用

销毁

• componentWillUnmount
  组件移除之前调用

适用场景：
性能要求不高、不需要复杂端上能力的组件。

Native组件

那么在需要端上能力、或性能要求高的时候怎么办呢？这就需要开发Native组件了，Native组件又可以简单的分为功能性组件和UI组件两种。

一般来说，Native的组件开发分为两部分，一部分是Native代码，一部分是与之配合的JS代码（JS端代码开发类似JS组件开发，开放接口，屏蔽实现细节、平台差异），这两部分共同构成一个Native组件。

Native功能组件

功能性组件类似服务开发，以模块的形式提供功能接口（单例），并暴露给JS端。

以 网络信息模块（NetInfo） 为例：

模块的JS端代码：

const RCTNetInfo = NativeModules.NetInfo;
// 已Promise的形式主动调用Native模块
RCTNetInfo.getCurrentConnectivity().then(resp => resp.network_info);

const NetInfoEventEmitter = new NativeEventEmitter(RCTNetInfo);
// 注册Native模块的事件
NetInfoEventEmitter.addListener(
      'networkStatusDidChange',
      (appStateData) => {
        handler(appStateData.network_info);
      }
    );

模块的Native端代码：

Android端：

  // 定义暴露的方法，以Promise的形式返回结果
  @ReactMethod
  public void getCurrentConnectivity(Promise promise) {
    promise.resolve(createConnectivityEventMap());
  }
  
  // 发送网络状态变更事件
  private void sendConnectivityChangedEvent() {
    getReactApplicationContext().getJSModule(RCTDeviceEventEmitter.class)
        .emit("networkStatusDidChange", createConnectivityEventMap());
  }
  
  // 创建网络状态变更事件数据
  private WritableMap createConnectivityEventMap() {
    WritableMap event = new WritableNativeMap();
    event.putString("network_info", mConnectivity);
    return event;
  }

（编辑：淮北站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!