如何在React Native中创建交互式绘图应用程序？

npm install -g react-native-cli

react-native init InteractiveDrawingApp

cd InteractiveDrawingApp

npm install react-native-svg --save

import React, { Component } from 'react';
import { View, PanResponder, Svg } from 'react-native';

class DrawingCanvas extends Component {
  constructor(props) {
    super(props);
    this.state = {
      paths: [],
      currentPath: '',
    };
    this.panResponder = PanResponder.create({
      onStartShouldSetPanResponder: () => true,
      onMoveShouldSetPanResponder: () => true,
      onPanResponderGrant: this.handlePanResponderGrant,
      onPanResponderMove: this.handlePanResponderMove,
      onPanResponderRelease: this.handlePanResponderRelease,
    });
  }

  handlePanResponderGrant = (e, gestureState) => {
    const { locationX, locationY } = gestureState;
    const path = `M${locationX},${locationY}`;
    this.setState({ currentPath: path });
  };

  handlePanResponderMove = (e, gestureState) => {
    const { locationX, locationY } = gestureState;
    const { currentPath } = this.state;
    const path = `${currentPath}L${locationX},${locationY}`;
    this.setState({ currentPath: path });
  };

  handlePanResponderRelease = () => {
    const { paths, currentPath } = this.state;
    this.setState({ paths: [...paths, currentPath], currentPath: '' });
  };

  renderPaths = () => {
    const { paths } = this.state;
    return paths.map((path, index) => (
      <Svg.Path key={index} d={path} stroke="black" fill="none" />
    ));
  };

  render() {
    return (
      <View {...this.panResponder.panHandlers}>
        <Svg width="100%" height="100%">
          {this.renderPaths()}
        </Svg>
      </View>
    );
  }
}

export default DrawingCanvas;

import React from 'react';
import { View } from 'react-native';
import DrawingCanvas from './DrawingCanvas';

const App = () => {
  return (
    <View style={{ flex: 1 }}>
      <DrawingCanvas />
    </View>
  );
};

export default App;

react-native run-android   // for Android
react-native run-ios       // for iOS