react-native-art-svg与原生模块通信：Android/iOS平台方法调用

【免费下载链接】react-native-svg 项目地址: https://gitcode.com/gh_mirrors/reac/react-native-art-svg

react-native-art-svg是React Native生态中用于渲染SVG（可缩放矢量图形）的重要库，它通过与原生模块通信，实现在Android和iOS平台上高效渲染SVG图形。本文将详细介绍react-native-art-svg如何与Android和iOS原生模块进行方法调用，包括通信机制、参数传递和平台适配等关键内容。

通信机制概述

react-native-art-svg与原生模块的通信基于React Native的桥接（Bridge）机制，通过JavaScript与原生代码之间建立的通信通道实现方法调用和数据传递。在React Native中，JavaScript代码运行在JavaScript引擎中，而原生代码运行在各自平台的虚拟机中（Android的Dalvik/ART虚拟机，iOS的Objective-C/Swift运行时），两者通过桥接机制进行异步通信。

react-native-art-svg的核心组件是Svg，它在JavaScript层定义了SVG渲染的各种属性和方法，然后通过原生模块将这些属性和方法传递到底层进行渲染。在Fabric架构下，react-native-art-svg使用了代码生成（Codegen）技术，进一步优化了JavaScript与原生之间的通信效率。

Android平台方法调用

在Android平台上，react-native-art-svg通过RNSVGSvgAndroid组件与原生模块进行通信。该组件使用codegenNativeComponent函数生成原生组件，定义了JavaScript与Android原生代码之间的接口。

原生组件定义

AndroidSvgViewNativeComponent.ts文件中定义了RNSVGSvgViewAndroid原生组件，其代码如下：

import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
import type { ColorValue } from 'react-native';
import type {
  Double,
  Float,
  Int32,
} from 'react-native/Libraries/Types/CodegenTypes';
import type { ViewProps } from './utils';

import type { UnsafeMixed } from './codegenUtils';
import { NumberProp } from '../lib/extract/types';

interface NativeProps extends ViewProps {
  bbWidth?: UnsafeMixed<NumberProp>;
  bbHeight?: UnsafeMixed<NumberProp>;
  minX?: Float;
  minY?: Float;
  vbWidth?: Float;
  vbHeight?: Float;
  align?: string;
  meetOrSlice?: Int32;
  tintColor?: ColorValue;
  color?: ColorValue;
  pointerEvents?: string;

  // Android平台特有属性
  hasTVPreferredFocus?: boolean;
  borderTopEndRadius?: Float;
  borderBottomStartRadius?: Float;
  borderBottomColor?: ColorValue;
  nextFocusDown?: Int32;
  borderRightColor?: ColorValue;
  nextFocusRight?: Int32;
  borderLeftColor?: ColorValue;
  borderColor?: ColorValue;
  removeClippedSubviews?: boolean;
  nextFocusForward?: Int32;
  nextFocusUp?: Int32;
  accessible?: boolean;
  borderStartColor?: ColorValue;
  borderBottomEndRadius?: Float;
  borderEndColor?: ColorValue;
  focusable?: boolean;
  nativeBackgroundAndroid?: NativeBackgroundProp;
  borderTopStartRadius?: Float;
  nativeForegroundAndroid?: NativeBackgroundProp;
  backfaceVisibility?: string;
  borderStyle?: string;
  needsOffscreenAlphaCompositing?: boolean;
  hitSlop?: HitSlop;
  borderTopColor?: ColorValue;
  nextFocusLeft?: Int32;
  borderTopRightRadius?: Double;
  borderBottomRightRadius?: Double;
  borderRadius?: Double;
  borderBottomLeftRadius?: Double;
  borderTopLeftRadius?: Double;
}

export default codegenNativeComponent<NativeProps>('RNSVGSvgViewAndroid', {
  excludedPlatforms: ['iOS'],
});

原生方法调用流程

1. JavaScript层调用：在JavaScript中创建Svg组件，并设置相应的属性，如width、height、tintColor等。
2. 属性传递：这些属性通过AndroidSvgViewNativeComponent.ts中定义的NativeProps接口传递到原生层。
3. 原生层处理：Android原生模块（如RNSVGSvgViewManager）接收这些属性，并调用相应的渲染方法绘制SVG图形。

iOS平台方法调用

在iOS平台上，react-native-art-svg通过RNSVGSvgIOS组件与原生模块进行通信，其通信机制与Android平台类似，但针对iOS平台的特性进行了适配。

原生组件定义

IOSSvgViewNativeComponent.ts文件中定义了RNSVGSvgView原生组件，其代码如下：

import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
import type { ColorValue } from 'react-native';
import type { Float, Int32 } from 'react-native/Libraries/Types/CodegenTypes';
import type { ViewProps } from './utils';

import type { UnsafeMixed } from './codegenUtils';
import { NumberProp } from '../lib/extract/types';

interface NativeProps extends ViewProps {
  bbWidth?: UnsafeMixed<NumberProp>;
  bbHeight?: UnsafeMixed<NumberProp>;
  minX?: Float;
  minY?: Float;
  vbWidth?: Float;
  vbHeight?: Float;
  align?: string;
  meetOrSlice?: Int32;
  tintColor?: ColorValue;
  color?: ColorValue;
  pointerEvents?: string;
}

export default codegenNativeComponent<NativeProps>('RNSVGSvgView', {
  excludedPlatforms: ['android'],
});

平台适配差异

与Android平台相比，iOS平台的NativeProps接口相对简洁，不包含Android特有的TV焦点和边框属性。这是因为iOS平台的UI组件体系与Android存在差异，需要根据平台特性进行针对性的属性定义。

参数传递与数据类型

react-native-art-svg在与原生模块通信时，需要进行参数传递，涉及多种数据类型的转换。以下是常见的数据类型及其在JavaScript和原生代码之间的映射关系：

JavaScript类型	Android原生类型	iOS原生类型
Number	float/double	CGFloat
String	String	NSString
Boolean	boolean	BOOL
Object	Bundle/HashMap	NSDictionary
Array	List	NSArray

在AndroidSvgViewNativeComponent.ts和IOSSvgViewNativeComponent.ts中，使用了UnsafeMixed、Float、Int32等类型来描述参数，确保JavaScript与原生代码之间的数据正确传递。

实例：绘制一个简单的SVG图形

以下是一个使用react-native-art-svg绘制简单SVG图形的示例，展示了JavaScript层如何调用原生模块进行渲染：

import React from 'react';
import { Svg, Circle } from 'react-native-svg';

const SimpleCircle = () => {
  return (
    <Svg width="100" height="100" viewBox="0 0 100 100">
      <Circle cx="50" cy="50" r="45" fill="red" stroke="black" strokeWidth="2" />
    </Svg>
  );
};

export default SimpleCircle;

在这个示例中，Svg组件的属性（如width、height、viewBox）通过原生组件传递到Android或iOS原生模块，然后由原生模块绘制出一个红色的圆形。

平台特有方法调用

react-native-art-svg针对Android和iOS平台提供了一些特有方法，以充分利用各平台的特性。例如，在Android平台上，可以使用nativeBackgroundAndroid属性设置原生背景，而在iOS平台上，可以使用tintColor属性设置色调。

Android平台特有方法

在Android平台上，可以通过AndroidSvgViewNativeComponent.ts中定义的nativeBackgroundAndroid属性设置原生背景，例如：

<Svg
  width="100"
  height="100"
  nativeBackgroundAndroid={{ color: '#ff0000', borderless: true }}
>
  {/* SVG内容 */}
</Svg>

iOS平台特有方法

在iOS平台上，可以通过tintColor属性设置SVG的色调，例如：

<Svg width="100" height="100" tintColor="blue">
  {/* SVG内容 */}
</Svg>

总结与展望

react-native-art-svg通过React Native的桥接机制与Android和iOS原生模块进行通信，实现了高效的SVG渲染。本文详细介绍了其通信机制、参数传递和平台适配等内容，包括AndroidSvgViewNativeComponent.ts和IOSSvgViewNativeComponent.ts两个核心文件的作用，以及平台特有方法的调用方式。

未来，随着React Native新架构（如Fabric和TurboModules）的普及，react-native-art-svg与原生模块的通信效率将进一步提升，为React Native应用中的SVG渲染带来更好的性能和用户体验。

官方文档：USAGE.md 示例代码：Example/ 测试用例：TestsExample/

【免费下载链接】react-native-svg 项目地址: https://gitcode.com/gh_mirrors/reac/react-native-art-svg