'# React Native中使用Canvas绘制图形
一、背景与问题
在移动应用开发中，图形绘制是常见的需求。React Native作为跨平台开发框架，提供了多种图形绘制方式：SVG、Animated API、第三方库（如react-native-svg、react-native-reanimated）等。然而，在某些特殊场景下，这些方案可能不适用：
- 需要精确控制像素级绘图：如游戏开发、图像处理、自定义UI控件
- 需要高性能动态图形：如实时数据可视化、粒子效果
- 需要离屏渲染：如复杂动画的预渲染
此时，Canvas API提供了更底层的控制能力。但需要注意，React Native的Canvas实现存在一些特殊性：
- 不支持Web的Canvas API完整功能（如
requestAnimationFrame） - 在Android和iOS平台存在实现差异
- 需要处理内存管理和性能优化问题
二、基本原理
React Native的Canvas是基于原生模块的封装，具体实现方式如下：
Android平台
使用Skia图形库，通过JSBridge传递绘制指令到Android原生代码，最终通过Canvas绘制到SurfaceView。
iOS平台
使用Core Graphics框架，通过JSBridge传递绘制指令到iOS原生代码，最终通过UIView的drawRect方法绘制。
核心机制
- JS到原生的通信：通过RCTBridge传递绘制指令
- 绘制缓存机制：React Native会维护Canvas的绘制状态
- 绘制队列处理：在主线程中处理绘制请求
- 内存管理：需要手动管理内存，避免内存泄漏
三、环境准备
1. 项目初始化
npx react-native init MyCanvasApp
cd MyCanvasApp
npm install react-native-canvas注意：React Native官方已移除Canvas模块，需使用第三方库或自定义原生模块
2. 配置Android
在AndroidManifest.xml中添加权限：
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />3. 配置iOS
在Info.plist中添加：
<key>NSCameraUsageDescription</key>
<string>需要访问摄像头</string>四、核心实现
1. 基础绘制
import React, { useRef, useEffect } from 'react';
import { View, Dimensions } from 'react-native';
import Canvas from 'react-native-canvas';
export default function CanvasDemo() {
const canvasRef = useRef(null);
useEffect(() => {
const ctx = canvasRef.current.getContext('2d');
// 绘制矩形
ctx.fillStyle = 'blue';
ctx.fillRect(10, 10, 100, 100);
// 绘制圆形
ctx.beginPath();
ctx.arc(150, 150, 50, 0, Math.PI * 2);
ctx.fillStyle = 'red';
ctx.fill();
// 绘制文本
ctx.font = '20px Arial';
ctx.fillStyle = 'black';
ctx.fillText('Canvas Demo', 20, 50);
}, []);
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Canvas
ref={canvasRef}
width={300}
height={300}
style={{ width: 300, height: 300, backgroundColor: 'white' }}
/>
</View>
);
}关键代码解释：
getContext('2d')：获取2D绘图上下文fillRect(x, y, width, height)：填充矩形arc(x, y, radius, startAngle, endAngle)：绘制圆形fillText(text, x, y)：绘制文本
2. 动态绘制
import React, { useRef, useEffect } from 'react';
import { View, Dimensions } from 'react-native';
import Canvas from 'react-native-canvas';
export default function DynamicCanvas() {
const canvasRef = useRef(null);
const [angle, setAngle] = React.useState(0);
useEffect(() => {
const ctx = canvasRef.current.getContext('2d');
const draw = () => {
ctx.clearRect(0, 0, 300, 300);
// 绘制动态旋转的圆形
ctx.save();
ctx.translate(150, 150);
ctx.rotate(angle);
ctx.beginPath();
ctx.arc(0, 0, 50, 0, Math.PI * 2);
ctx.fillStyle = 'green';
ctx.fill();
ctx.restore();
setAngle(prev => prev + 0.01);
};
const interval = setInterval(draw, 16); // 约60帧
return () => clearInterval(interval);
}, []);
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Canvas
ref={canvasRef}
width={300}
height={300}
style={{ width: 300, height: 300, backgroundColor: 'white' }}
/>
</View>
);
}关键代码解释：
clearRect()：清除画布内容save()/restore()：保存/恢复画布状态translate()/rotate()：变换坐标系- 使用
setInterval模拟动画循环
3. 复杂图形绘制
import React, { useRef, useEffect } from 'react';
import { View, Dimensions } from 'react-native';
import Canvas from 'react-native-canvas';
export default function ComplexCanvas() {
const canvasRef = useRef(null);
useEffect(() => {
const ctx = canvasRef.current.getContext('2d');
// 绘制渐变色
const gradient = ctx.createLinearGradient(0, 0, 200, 200);
gradient.addColorStop(0, 'red');
gradient.addColorStop(1, 'blue');
// 绘制路径
ctx.beginPath();
ctx.moveTo(100, 100);
ctx.lineTo(200, 150);
ctx.lineTo(150, 250);
ctx.closePath();
ctx.fillStyle = gradient;
ctx.fill();
// 绘制阴影
ctx.shadowColor = 'rgba(0, 0, 0, 0.5)';
ctx.shadowBlur = 10;
ctx.shadowOffsetX = 5;
ctx.shadowOffsetY = 5;
ctx.fillStyle = 'yellow';
ctx.fillRect(10, 10, 100, 100);
}, []);
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Canvas
ref={canvasRef}
width={300}
height={300}
style={{ width: 300, height: 300, backgroundColor: 'white' }}
/>
</View>
);
}关键代码解释：
createLinearGradient()：创建线性渐变moveTo()/lineTo()：绘制路径shadowColor/shadowBlur：设置阴影效果fillStyle：设置填充样式
五、完整案例
1. 实现一个简单的动态图表
import React, { useRef, useEffect, useState } from 'react';
import { View, Dimensions, StyleSheet } from 'react-native';
import Canvas from 'react-native-canvas';
const { width, height } = Dimensions.get('window');
export default function DynamicChart() {
const canvasRef = useRef(null);
const [data, setData] = useState([10, 20, 30, 40, 50]);
useEffect(() => {
const ctx = canvasRef.current.getContext('2d');
const draw = () => {
ctx.clearRect(0, 0, width, height);
// 绘制坐标轴
ctx.beginPath();
ctx.moveTo(50, height - 50);
ctx.lineTo(width - 50, height - 50);
ctx.strokeStyle = '#000';
ctx.stroke();
// 绘制柱状图
ctx.fillStyle = 'blue';
data.forEach((value, index) => {
const x = 80 + index * 60;
const y = height - 50 - value;
ctx.fillRect(x, y, 40, value);
});
// 绘制折线图
ctx.beginPath();
ctx.strokeStyle = 'red';
ctx.moveTo(80, height - 50);
data.forEach((value, index) => {
const x = 80 + index * 60;
const y = height - 50 - value;
ctx.lineTo(x, y);
});
ctx.stroke();
};
draw();
}, [data]);
return (
<View style={styles.container}>
<Canvas
ref={canvasRef}
width={width}
height={height}
style={styles.canvas}
/>
<View style={styles.buttonContainer}>
<View style={styles.button} onPress={() => setData([...data, data[data.length - 1] + 10])}>
<Text>增加数据</Text>
</View>
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
canvas: {
width: '100%',
height: 300,
backgroundColor: 'white',
},
buttonContainer: {
marginTop: 20,
flexDirection: 'row',
},
button: {
padding: 10,
backgroundColor: '#ddd',
margin: 10,
},
});关键点：
- 使用
Dimensions获取屏幕尺寸 - 动态更新数据并重绘
- 同时绘制柱状图和折线图
- 使用
setInterval模拟数据更新
六、源码解析
以Android平台为例，Canvas的绘制流程：
- React Native通过JSBridge将绘制指令发送到Android原生模块
- Android原生模块将指令转换为Skia的绘制操作
- 绘制结果通过SurfaceView展示
- 在iOS平台上，通过Core Graphics实现类似逻辑
关键差异点：
- Android支持更多的Canvas API功能
- iOS在某些情况下可能需要手动处理坐标系转换
- Android默认支持抗锯齿，iOS需要显式开启
七、进阶使用
1. 离屏渲染
import React, { useRef, useEffect } from 'react';
import { View, Dimensions } from 'react-native';
import Canvas from 'react-native-canvas';
export default function OffscreenCanvas() {
const canvasRef = useRef(null);
useEffect(() => {
const ctx = canvasRef.current.getContext('2d');
// 离屏渲染
ctx.fillStyle = 'red';
ctx.fillRect(0, 0, 100, 100);
// 将离屏内容绘制到主canvas
const mainCtx = canvasRef.current.getContext('2d');
mainCtx.drawImage(canvasRef.current, 0, 0);
}, []);
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Canvas
ref={canvasRef}
width={300}
height={300}
style={{ width: 300, height: 300, backgroundColor: 'white' }}
/>
</View>
);
}关键点：
- 离屏渲染可用于复杂图形的预处理
- 需要确保绘制顺序正确
- 注意内存管理，避免内存泄漏
2. 动画优化
import React, { useRef, useEffect } from 'react';
import { View, Dimensions } from 'react-native';
import Canvas from 'react-native-canvas';
export default function OptimizedCanvas() {
const canvasRef = useRef(null);
const [angle, setAngle] = React.useState(0);
useEffect(() => {
const ctx = canvasRef.current.getContext('2d');
const draw = () => {
ctx.clearRect(0, 0, 300, 300);
// 使用离屏缓存
const cachedCtx = canvasRef.current.getContext('2d');
cachedCtx.fillStyle = 'blue';
cachedCtx.fillRect(10, 10, 100, 100);
// 绘制缓存内容
ctx.drawImage(canvasRef.current, 0, 0);
};
const interval = setInterval(draw, 16); // 约60帧
return () => clearInterval(interval);
}, []);
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Canvas
ref={canvasRef}
width={300}
height={300}
style={{ width: 300, height: 300, backgroundColor: 'white' }}
/>
</View>
);
}关键点：
- 使用离屏缓存减少重复绘制
- 优化动画性能
- 注意内存管理
八、性能与工程实践
1. 性能优化策略
| 优化策略 | 说明 |
|---|---|
| 减少重绘 | 使用clearRect而非clear |
| 离屏缓存 | 避免重复绘制复杂图形 |
| 简化路径 | 避免复杂的路径操作 |
| 使用位图 | 对静态图形使用drawImage |
| 限制帧率 | 使用setInterval控制帧率 |
2. 异常处理
try {
const ctx = canvasRef.current.getContext('2d');
if (!ctx) throw new Error('无法获取Canvas上下文');
// 绘制操作
} catch (error) {
console.error('Canvas绘制错误:', error);
}3. 安全考虑
- 避免绘制用户输入的未验证内容
- 禁用
eval()等危险函数 - 对敏感数据进行加密处理
九、常见问题与踩坑
1. 常见错误及解决办法
| 错误现象 | 原因 | 解决方案 |
|---|---|---|
| 绘制不显示 | 未正确设置canvas尺寸 | 确保width/height属性正确 |
| 动画卡顿 | 频繁重绘 | 使用离屏缓存，限制帧率 |
| 坐标系错误 | 忘记转换坐标 | 使用translate/scale调整坐标 |
| 内存泄漏 | 未清理定时器 | 在useEffect返回函数中清理 |
2. Android/iOS差异
| 问题 | Android | iOS |
|---|---|---|
| 动画性能 | 更好 | 较差 |
| 坐标系 | 原点在左上 | 原点在左上 |
| 色彩空间 | 支持更多色彩 | 限制色彩空间 |
| 内存管理 | 自动管理 | 需要手动管理 |
十、最佳实践
优先使用Canvas：
- 需要精细控制绘图时
- 需要高性能动态图形时
- 需要离屏渲染时
避免使用Canvas：
- 简单的UI组件：使用View和Style
- 静态图形：使用SVG
- 复杂动画：使用react-native-reanimated
开发建议：
- 使用React.memo优化组件
- 使用useRef管理canvas实例
- 对复杂图形进行分层绘制
- 使用位图缓存静态内容
十一、总结
React Native的Canvas提供了强大的绘图能力，但需要开发者深入理解其工作原理和实现细节。在实际开发中，需要根据具体需求选择合适的绘图方案：简单UI使用View，静态图形使用SVG，动态图形使用Canvas。同时要注意性能优化、内存管理和平台差异，避免常见的陷阱。通过合理使用Canvas，可以实现丰富的视觉效果，提升应用的用户体验。