--- tags: react-native --- # React Nativeまとめ ## インストール ### Node.js anyenvからnodenvをインストール ```bash $ brew install anyenv $ anyenv install nodenv ``` ### watchman ファイルの更新を検知する ```bash $ brew install watchman ``` ### flow 静的型チェックを行う ```bash $ brew install flow ``` ### react-native-cli プロジェクトの初期化などに利用する ```bash $ yarn global add @react-native-community/cli ``` ### react-dev-tools インスペクタと連携して、コンポーネントをChromeから確認可能 ```bash $ yarn global add react-devtools@^3 ``` ### CocoaPods React NativeはiOSでは、CocoaPodsでネイティブコードを管理する。 ```bash $ sudo gem install cocoapods ``` ### Android Studio ```bash $ brew cask install android-studio ``` ## 起動 ### プロジェクトの初期化 ```bash $ react-native init testProject --template react-native-template-typescript ``` ネイティブ層の依存パッケージをインストールする。 ```bash $ cd ios $ pod install ``` iOSのシミュレーターを起動 ```bash $ react-native run-ios ``` サーバーを起動 ```bash $ react-native start ``` xcodeで起動 ```bash $ xed -b ios ``` #### Metro Bundler * アプリ起動時に立ち上がる * TypeScirptファイルのバンドルを行う * 処理をキャッシュして、差分コンパイルを行う * ディレクトリの移動を行った場合、更新されないことがあるので、キャッシュを削除する必要がある * 実際のアプリ配布時は、Metro Bundlerサーバーを経由しないため、バンドル済みのJavaScriptをアプリに含めて配布する ## React Native コンポーネント ### View * 基本となるコンポーネント * 何も表示しない ### Text * 文字列を表示するときは、必ずTextコンポーネントを使う ### Image * 画像を表示する時に利用する * 指定方法 * JavaScript層 * プラットフォーム共通で使用できる * アイコンなどで利用 * ネイティブ層 * Asset Catalog (iOS), drawable (Android)で表示する * URLでの指定 * ネットワーク上の画像を指定 * コンテンツ画像を同封すると、アプリサイズが大きくなるため、ネットワークから取得するのが良い ### ImageBackGround * 背景画像を表示 ### ScrollView * 画面外で描画されるコンポーネントの描画をスキップ ### FlatList * 配列を表示する ### SectionList * TODO ### Touchable * ボタン系のコンポーネント * TouchableWithoutFeedback * 押しても見た目が変化しない * TouchableOpacity * 押したら透明度が変化する * TouchableHighLight * 押したら背景色が変化する ### TextInput * ユーザーの入力を受け取る ## Utility ### Alert * アラートメッセージを表示 ### AppState * 状態が変更したときの処理 * State * active * フォアグラウンドにあるとき * inactive * androidではない * iosではアプリ一覧、backgroundに移行するとき * background * ホーム画面や他のアプリがフォアグラウンドにあるとき ### Clipboard * クリップボードの状態を取得、新しい値を設定する ### Dimensions * デバイスサイズの取得 * デバイスの向きが変わったときの処理の指定 ### Linking * URLを開く ### Vibration * デバイスのバイブレーション機能を使用 ### WebView * URLから取得したWebページを表示する ### ScrollView * スクロール可能にする ### SafeAreaView * 文字が見えづらい領域で表示されないようにする ### データの受け渡しについて * App -> WebView * injectJavaScript * JavaScriptのコードをWebViewで実行できる * WebView -> App * onMessage * window.ReactNativeWebView.postMessage ## Navigation * iOS, Android両OSに対応するため、サードパーティのreact-navigationが利用される * Webと基本的に同じだが、URLを入力して移動できないので、容易にたどり着けるようにする * react-naviagation * ナビゲーション * react-navigation-stack * 画面の履歴 * react-native-reanimated * アニメーション * react-native-gesture-handler * ジェスチャー管理 * react-native-screens * Screen * react-native-safe-area-context * セーフエリア * @react-native-community/masked-view * MaskedView ```bash $ yarn add react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view ``` ## スタイルについて ### style props * HTMLと同じように、CSSを適用してスタイルを変化させることができる。 * styleSheet.createでスタイルシートを定義する ```typescirpt const style = StyleSheet.create({ astyle: { fontSize: 10, }, bstyle: { fontSize: 12, } }) ``` ### Flexbox ### Styled-Components webと同様にReact Nativeでもstyled-componentsでコンポーネントのスタイリングができる ```typescript const BodyView = styled.View` background-color: #eeeeee; `; ``` ## 参考 * React-Native ~ JavaScriptによるiOS/Andriodアプリ開発の実践