React Native 暴露给JavaScript端的plugins

最新推荐文章于 2024-04-26 15:29:45 发布

weixin_34034261

最新推荐文章于 2024-04-26 15:29:45 发布

阅读量203

点赞数

文章标签： javascript 移动开发 python ViewUI

原文链接：https://my.oschina.net/bosscheng/blog/2245045

版权

本文深入探讨了React Native中关键模块的功能与用法，包括事件处理、原生模块调用、平台差异处理、颜色转换、图片生成等。通过具体代码示例，详细介绍了如何在项目中有效利用这些模块。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

2019独角兽企业重金招聘Python工程师标准>>>


  // 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)
);

转载于:https://my.oschina.net/bosscheng/blog/2245045