1

我正在尝试构建一个具有绘图功能的反应原生应用程序，我遇到了这个包：https ://www.npmjs.com/package/react-native-draw-on-screen

这篇文章中也提到了这个包： 如何使用 React Native 在屏幕上绘图？

看来我们必须根据示例导入一个名为“Controls”的模块，但我不确定包中是否提供了该代码。我还尝试查找 react 是否与handleColorChangeor相关handleBrushSizeChange，但这似乎特定于 Controls 模块。

有什么我可以代替这个模块写的吗？我真的很感激这方面的任何帮助！

下面是包提供的示例代码：

import React from 'react';
import { StyleSheet, View, SafeAreaView } from 'react-native';
import RNDrawOnScreen from 'react-native-draw-on-screen';
import Controls from './Controls';
 
export default class App extends React.Component {
  state = {
    color: 'black',
    strokeWidth: 10,
  };
 
  changeColor = (color) => {
    this.setState({ color });
  };
 
  changeBrushSize = (strokeWidth) => {
    this.setState({ strokeWidth });
  };
 
  undo = () => {
    this.RNDraw.undo();
  };
 
  clear = () => {
    this.RNDraw.clear();
  };
 
  render() {
    return (
      <SafeAreaView style={{ flex: 1 }}>
        <Controls
          handleColorChange={this.changeColor}
          handleBrushSizeChange={this.changeBrushSize}
          selectedColor={this.state.color}
          selectedStrokeWidth={this.state.strokeWidth}
          handleUndo={this.undo}
          handleClear={this.clear}
        />
        <View
          style={{
            flex: 1,
            flexGrow: 1,
            border: 'solid',
            borderWidth: 2,
            borderColor: '#ccc',
          }}
        >
          <RNDrawOnScreen
            penColor={this.state.color}
            strokeWidth={this.state.strokeWidth}
            ref={(r) => (this.RNDraw = r)}
          />
        </View>
      </SafeAreaView>
    );
  }
}

PS这是我在stackoverflow上的第一篇文章，如果有任何关于提出好问题的反馈，我也会很感激！

4

0 回答 0