1

描画機能を備えた反応ネイティブアプリを構築しようとしていますが、このパッケージに出くわしました: https://www.npmjs.com/package/react-native-draw-on-screen

このパッケージは、次の投稿でも言及されています: React Native で画面に描画するには?

例に基づいて「Controls」というモジュールをインポートする必要があるようですが、そのコードがパッケージで提供されているかどうかはわかりません。反応がhandleColorChangeorhandleBrushSizeChangeに関連するものがあるかどうかも調べてみましたが、それは 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