描画機能を備えた反応ネイティブアプリを構築しようとしていますが、このパッケージに出くわしました: https://www.npmjs.com/package/react-native-draw-on-screen
このパッケージは、次の投稿でも言及されています: React Native で画面に描画するには?
例に基づいて「Controls」というモジュールをインポートする必要があるようですが、そのコードがパッケージで提供されているかどうかはわかりません。反応がhandleColorChange
orhandleBrushSizeChange
に関連するものがあるかどうかも調べてみましたが、それは 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 に関する私の最初の投稿です。良い質問をすることについてもフィードバックをいただければ幸いです。