// Plugins  // 发送事件到JavaScript  get DeviceEventEmitter() { return require('RCTDeviceEventEmitter'); },    // 原生和js端，发送通知。  get NativeAppEventEmitter() { return require('RCTNativeAppEventEmitter'); },    // 引用 RN 的原生模块。  get NativeModules() { return require('NativeModules'); },    // 平台差异性  get Platform() { return require('Platform'); },    // 字符Color转换为数字  get processColor() { return require('processColor'); },    // 应用RN原生模块。  get requireNativeComponent() { return require('requireNativeComponent'); },    // 是react-native自带的生成图片的属性,可以将”screen”, “window” 或者 “view”生成对应的图片。  get takeSnapshot() { return require('takeSnapshot'); },

DeviceEventEmitter 的用法

发送事件到JavaScript。

原生模块可以在没有被调用的情况下往 JavaScript 发送事件通知。最简单的办法就是通过RCTDeviceEventEmitter，这可以通过ReactContext来获得对应的引用。

JavaScript 模块可以通过使用DeviceEventEmitter模块来监听事件：

import { DeviceEventEmitter } from 'react-native';// ...componentWillMount() {  DeviceEventEmitter.addListener('keyboardWillShow', (e: Event) => {    // handle event.  });}

NativeAppEventEmitter 的用法

实现 原生和js端，发送通知。

RN使用NativeAppEventEmitter.addListener中注册一个通知，之后再OC中通过bridge.eventDispatcher sendAppEventWithName发送一个通知，这样就形成了调用关系。

NativeModules 的用法

引用 RN 的原生模块。

import {NativeModules} from 'react-native';

Platform 的用法

React Native 提供了一个检测当前运行平台的模块。如果组件只有一小部分代码需要依据平台定制，那么这个模块就可以派上用场。

import { Platform, StyleSheet } from "react-native";const styles = StyleSheet.create({  height: Platform.OS === "ios" ? 200 : 100});

Platform.OS在 iOS 上会返回ios，而在 Android 设备或模拟器上则会返回android。

Platform.OS 返回一个字符串，表示平台的基本信息。

Platform.create

import { Platform, StyleSheet } from "react-native";const Component = Platform.select({  ios: () => require("ComponentIOS"),  android: () => require("ComponentAndroid")})();

检查安卓的版本

Platform.Version // 表示安卓的 API 的 level。

检查苹果的版本

比如可能是"10.3"。

const majorVersionIOS = parseInt(Platform.Version, 10);

processColor 的用法

由于color使用的是String，我们可以用react-native的processColor将其转换为数字，从而可以让java识别出颜色，为了方便使用，所以我这边重写创建了Component，作为中间组件，对color进行转换。

requireNativeComponent 的用法

引用 RN 的原生视图。

requireNativeComponent目前只接受一个参数，即原生视图的名字。

import {requireNativeComponent} from 'react-native';module.exports = requireNativeComponent("RCTImageView");

takeSnapshot 的用法

// takeSnapshot第一个参数：需要生成图片的视图类型，比如：’screen’,’window’,’this.refs.view’// takeSnapshot第二个参数：生成图片的格式ReactNative.takeSnapshot('screen', {format: 'png', quality: 1}).then(  (uri) => this.setState({uri:uri})).catch(  (error) => alert(error));