今回は、アプリの画面上を自由に描画することができる「
react-native-sketch-canvas
」ライブラリについて紹介します。
また、本記事は、ライブラリの実装手順までを紹介します。
本記事を読むことで、このようなアプリを実装することができます。
1. 環境
筆者本人が使っている環境(バージョン)です。
|
1 2 3 |
$ react-native -v react-native-cli: 2.0.1 react-native: 0.63.2 |
2. プロジェクトの作成
React Native CLIのプロジェクトを作成します
(MyAppの箇所は、任意のプロジェクト名でOKです)。
|
1 |
$ react-native init MyApp |
3. ライブラリのインストール
以下のコマンドを実行して、インストールします。
|
1 |
$ npm install --save @terrylinla/react-native-sketch-canvas |
ライブラリをインストール後、ios ディレクトリに移動して
pod install
コマンドを実行し、
ネイティブモジュールのセットアップをします。
|
1 2 |
$ cd ios $ pod install |
4. SketchCanvasコンポーネントの使い方
4.1 インポート
SketchCanvasコンポーネントをインポートします
|
1 |
import RNSketchCanvas from '@terrylinla/react-native-sketch-canvas'; |
4.2 サンプルコード
以下のコードは、GitHubに記載のあるソースコードとほぼ同じコードです。
このソースコードをコピペするだけで、実装することが可能です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 |
import React, { Component } from 'react'; import { StyleSheet, Text, View, } from 'react-native'; import RNSketchCanvas from '@terrylinla/react-native-sketch-canvas'; export default class MyApp extends Component { render() { return ( <View style={styles.container}> <View style={{ flex: 1, flexDirection: 'row' }}> <RNSketchCanvas containerStyle={{ backgroundColor: 'transparent', flex: 1 }} canvasStyle={{ backgroundColor: 'transparent', flex: 1 }} defaultStrokeIndex={0} defaultStrokeWidth={5} closeComponent={ <View style={styles.functionButton}> <Text style={{ color: 'white' }}> Close </Text> </View> } undoComponent={ <View style={styles.functionButton}> <Text style={{ color: 'white' }}> Undo </Text> </View> } clearComponent={ <View style={styles.functionButton}> <Text style={{ color: 'white' }}> Clear </Text> </View> } eraseComponent={ <View style={styles.functionButton}> <Text style={{ color: 'white' }}> Eraser </Text> </View> } strokeComponent={color => ( <View style={ [{ backgroundColor: color }, styles.strokeColorButton] } /> )} strokeSelectedComponent={(color, index, changed) => { return ( <View style={ [{ backgroundColor: color, borderWidth: 2 }, styles.strokeColorButton] } /> ) }} strokeWidthComponent={(w) => { return (<View style={styles.strokeWidthButton}> <View style={{ backgroundColor: 'white', marginHorizontal: 2.5, width: Math.sqrt(w / 3) * 10, height: Math.sqrt(w / 3) * 10, borderRadius: Math.sqrt(w / 3) * 10 / 2 }} /> </View> ) }} saveComponent={ <View style={styles.functionButton}> <Text style={{ color: 'white' }}> Save </Text> </View> } savePreference={() => { return { folder: 'RNSketchCanvas', filename: String(Math.ceil(Math.random() * 100000000)), transparent: false, imageType: 'png' } }} /> </View> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#F5FCFF', marginTop: 50, marginBottom: 50 }, strokeColorButton: { marginHorizontal: 2.5, marginVertical: 8, width: 30, height: 30, borderRadius: 15, }, strokeWidthButton: { marginHorizontal: 2.5, marginVertical: 8, width: 30, height: 30, borderRadius: 15, justifyContent: 'center', alignItems: 'center', backgroundColor: '#39579A' }, functionButton: { marginHorizontal: 2.5, marginVertical: 8, height: 30, width: 60, backgroundColor: '#39579A', justifyContent: 'center', alignItems: 'center', borderRadius: 5, } }); |
 | React Native Expoではじめるスマホアプリ開発 ~JavaScriptによるアプリ構築の実際~ 新品価格 |
4.3 警告表示について
SketchCanvasコンポーネントを実装した際に、以下の2つの警告が表示されました
Warning
: componentWillMount has been renamed, and is not recommended for use. See https://fb.me/react-unsafe-component-lifecycles for details.
(省略)
Warning : componentWillReceiveProps has been renamed, and is not recommended for use. See https://fb.me/react-unsafe-component-lifecycles for details.
* Move data fetching code or side effects to componentDidUpdate. * If you’re updating state whenever props change, refactor your code to use memoization techniques or move it to static getDerivedStateFromProps. Learn more at: https://fb.me/react-derived-state * Rename componentWillReceiveProps to UNSAFE_componentWillReceiveProps to suppress this warning in non-strict mode. In React 17.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run
(省略)
Warning : componentWillReceiveProps has been renamed, and is not recommended for use. See https://fb.me/react-unsafe-component-lifecycles for details.
* Move data fetching code or side effects to componentDidUpdate. * If you’re updating state whenever props change, refactor your code to use memoization techniques or move it to static getDerivedStateFromProps. Learn more at: https://fb.me/react-derived-state * Rename componentWillReceiveProps to UNSAFE_componentWillReceiveProps to suppress this warning in non-strict mode. In React 17.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run
npx react-codemod rename-unsafe-lifecycles in your project source folder.
この警告は、SketchCanvasコンポーネントで「componentWillMount」と「componentWillReceiveProps」と言う名前のコンポーネントを使っている為、警告が出ています。
以前のReactのバージョンアップで、以下のライフサイクルメソッドがリネームされました。
- (旧)componentWillMount → (新)UNSAFE_componentWillMount
- (旧)componentWillReceiveProps → (新)UNSAFE_componentWillReceiveProps
- (旧)componentWillUpdate → (新)UNSAFE_componentWillUpdate
つまり、 旧型の名前を使っている為、新しい方の名前を使ってください と言う警告でした。
公式サイトで、コンポーネントの名前を自動で、新しい名前に変換することができる「codemod」コマンドが用意されているので、実行しましょう。
公式リンク
コマンドの実行
プロジェクト名/node_modules/@terrylinla/react-native-sketch-canvas/src/のSketchCanvas.jsファイルに警告元のコンポーネントがあるので、 srcディレクトリまで移動してからコマンドを実行します。
(公式に npx react-codemod rename-unsafe-lifecycles コマンドで、できると書いてありましたが、実際にやってみたがそのままだとできず –forceをつけると無事変換できました。)
|
1 2 |
$ cd プロジェクト名/node_modules/@terrylinla/react-native-sketch-canvas/src/ $ npx react-codemod rename-unsafe-lifecycles --force |
コマンドを実行すると、
|
1 |
? Which dialect of JavaScript do you use? |
と、質問されるので、「JavaScript」を選択すると変換することができました。
もし、変換されずに警告が表示されている場合は、
“SketchCanvas.jsファイル”で使われている「componentWillReceiveProps」と「componentWillMount」を手動で変更すると警告は消えます。
|
1 2 3 4 5 6 7 8 |
・・・ UNSAFE_componentWillReceiveProps(nextProps) { // componentWillReceiveProps this.setState({ text: this._processText(nextProps.text ? nextProps.text.map(t => Object.assign({}, t)) : null) }) } ・・・ |
|
1 2 3 4 5 6 7 |
・・・ UNSAFE_componentWillMount() { // componentWillMount this.panResponder = PanResponder.create({ // Ask to be the responder: onStartShouldSetPanResponder: (evt, gestureState) => true, onStartShouldSetPanResponderCapture: (evt, gestureState) => true, ・・・ |
(本ライブラリの最終更新日が2年前だったので、それが原因みたいですね…。)
4.4 機能
サンプルコードでは、
- iOSとAndroid両方に対応
- 線の太さと色は、描画中に変更可能
- 1つ前の動作に戻すこと可能
- 消しゴム機能搭載
- 全削除機能
他にも「他のデバイス、他の誰かと一緒に編集可能な機能」や「同じ画面で複数のキャンバスを描画できる機能」など多くの機能も実装できるみたいなので、他の機能については、別の記事でまとめてみたいと思います。
5. 参考
今回紹介した、「react-native-sketch-canvas」のGitHubのリンクです。
react-native-sketch-canvas
6. まとめ
今回は、「react-native-sketch-canvas」についての実装手順について紹介しました。
簡単にキャンバスを実装することができるこのライブラリをどうしても紹介したくて、この記事を書きました。
本ライブラリの最終更新日が二年前ということが気にならない方には、おすすめのライブラリだと思います。
