※ 自分用・共有用メモ

ReactNativeとは

Build native mobile apps using JavaScript and React


https://facebook.github.io/react-native/
ReactとJSを使用して、iOSとAndroidのネイティブアプリ開発を行うことができるフレームワーク

getting started

バージョン: React Native 0.54

インストール

brew install node
brew install watchman
npm install -g react-native-cli

Xcode/Android Studioのセットアップ

  • Xcodeのインストール

    • Xcode Command Line Toolsのインストール(Xcodeを開いてPreferences > Command Line Tools)
  • Androidのインストールと設定

    • Android Studioの設定

      • SDK Managerで下記にチェック

        • Android 6.0 (Marshmallow)

          • Google APIs
          • Android SDK Platform 23
          • Intel x86 Atom_64 System Image
          • Google APIs Intel x86 Atom_64 System Image
          • Android SDK Build-Tools 23.0.1

          GettingStartedAndroidSDKManagerMacOS.png
          GettingStartedAndroidSDKManagerSDKToolsMacOS.png

      • AVDの作成
        GettingStartedCreateAVDx86MacOS.png

    • 環境変数の設定

      export ANDROID_HOME=$HOME/Library/Android/sdk
      export PATH=$PATH:$ANDROID_HOME/tools
      export PATH=$PATH:$ANDROID_HOME/platform-tools
      

プロジェクト作成

react-native init AwesomeProject

アプリ実行(シュミレーター)

cd AwesomeProject
react-native run-ios or react-native run-android // Androidの場合、emulatorを別途起動してからでないと実行できなかった

※ ターミナルからAndroidのエミュレータ実行

emulator -list-avds // インストールされているAVDの一覧表示
emulator -avd {avd_name} // AVDを指定してエミュレータの起動

オプショナル

その他の開発ツール

  • flow(静的型チェックツール)のインストール

    • react-native init ~した時点で.flowconfigができているので、中身をみてflowのversionを確認する
    ~
    suppress_comment=\\(.\\|\n\\)*\\$FlowExpectedError
    
    [version]
    ^0.65.0
    
    • yarnやnpmで対応するflow-binをインストールする
    npm i flow-bin@0.65.0 --save-dev
    
    • package.jsonのscriptにflowコマンドを追加する
    "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest",
    "flow": "flow"
    },
    
    • flowコマンドを実行する
    npm run flow
    
    // 実行結果
    > AwesomeProject@0.0.1 flow /Users/ST0124/Source/AwesomeProject
    > flow
    
    No errors!
    
  • eslintのインストール

    npm i eslint eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react eslint-watch babel-core babel-eslint babel-preset-airbnb babel-preset-react-native -D
    
    • .eslintrcを以下の設定にする
    {
      "parser": "babel-eslint",
      "extends": "airbnb",
      "plugins": ["react", "jsx-a11y", "import"],
      "rules": {
        "react/jsx-filename-extension": ["off"],
        "linebreak-style": ["off"],
        "no-undef": ["error"],
        "react/sort-comp": ["off"],
        "react/prefer-stateless-function": ["off"],
        "no-use-before-define": ["off"],
        "no-useless-concat": ["off"]
      }
    }
    
    • エディターにeslintのプラグインをセットアップする

    スクリーンショット 2018-03-16 11.52.44.png

  • prettierのインストール

    npm install --save-dev --save-exact prettier
    
    • エディターにprettierとeslintを共存して使うためのプラグイン等をセットアップする。


※ 画像引用元: Building the F8 App

Redux

npm install --save redux
npm install --save react-redux

参考

公式のgetting started

https://facebook.github.io/react-native/docs/getting-started.html

with Native Code

ライブラリリンク集

https://native.directory/
https://github.com/jondot/awesome-react-native
https://github.com/brillout/awesome-react-components

オープンソースアプリ

Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account log in.