react-native  android







[Getting Started · React Native](https://facebook.github.io/react-native/docs/getting-started.html)


![スクリーンショット 2018-05-01 14.18.00.png](https://qiita-image-store.s3.amazonaws.com/0/49910/2fbb2f7c-92c7-bf8f-8ea3-81a8f2c1a1d8.png "スクリーンショット 2018-05-01 14.18.00.png")




1. Install Android Studio

2. Install the Android SDK


"SDK Platforms" tab from within the SDK Manager, then check the box next to "Show Package Details" in the bottom right corner. Look for and expand the Android 6.0 

* Google APIs
* Android SDK Platform 23
* Intel x86 Atom_64 System Image
* Google APIs Intel x86 Atom_64 System Image



![スクリーンショット 2018-05-01 14.13.46.png](https://qiita-image-store.s3.amazonaws.com/0/49910/2eb5869c-67fa-c887-141c-16ff8e553540.png "スクリーンショット 2018-05-01 14.13.46.png")


"SDK Tools" tab and check the box next to "Show Package Details" here as well. Look for and expand the "Android SDK Build-Tools" entry, then make sure that 23.0.1 is selected.



![スクリーンショット 2018-05-01 14.19.44.png](https://qiita-image-store.s3.amazonaws.com/0/49910/9e48a18c-1295-e439-6117-471ed998577e.png "スクリーンショット 2018-05-01 14.19.44.png")


Applyをクリックする



## .bash_profile





```
vi $HOME/.bash_profile

```

以下を追加する。

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




### 確認

一度ターミナルを閉じて、再度表示。以下コマンドで環境変数を表示

`echo $PATH`

パスは以下で確認するパスと同じになっていればOK
Appearance & Behavior → System Settings → Android SDK.


![スクリーンショット 2018-05-01 14.25.59.png](https://qiita-image-store.s3.amazonaws.com/0/49910/ac06b55b-7cdb-6aec-f020-3bb60843d0e6.png "スクリーンショット 2018-05-01 14.25.59.png")

/Users/atsu/Library/Android/sdk



## AVD

Create Virtual Device...


![スクリーンショット 2018-05-01 14.32.40.png](https://qiita-image-store.s3.amazonaws.com/0/49910/940f0a2b-c160-7c6a-dc2e-fb9ef45f522a.png "スクリーンショット 2018-05-01 14.32.40.png")



![スクリーンショット 2018-05-01 14.38.16.png](https://qiita-image-store.s3.amazonaws.com/0/49910/229038e0-cfa6-535e-9b92-6bb9c06a8582.png "スクリーンショット 2018-05-01 14.38.16.png")


Select the "x86 Images" tab, then look for the Marshmallow API Level 23, x86_64 ABI image with a Android 6.0 (Google APIs) target.


![スクリーンショット 2018-05-01 14.39.14.png](https://qiita-image-store.s3.amazonaws.com/0/49910/a051ee7c-27af-aff6-c723-6ea146c869b5.png "スクリーンショット 2018-05-01 14.39.14.png")


Click Finish!!



## Running your React Native application


react-native init AwesomeProject

cd AwesomeProject
react-native run-android



以下のように表示される場合にはandroid emuが起動していない時 
```
Could not install the app on the device, read the error above for details.
Make sure you have an Android emulator running or a device connected and have
set up your Android development environment:
https://facebook.github.i


以下のコマンドで動いてるエミュレーターを確認

```
adb devices
```


### emulatorを起動する

赤い画面が表示されたとき


![スクリーンショット 2018-05-01 14.53.55.png](https://qiita-image-store.s3.amazonaws.com/0/49910/fe3e38ec-a768-b2e2-1aa0-a912c47db9bf.png "スクリーンショット 2018-05-01 14.53.55.png")






console.error: "React Native version mismatch.

JavaScript version: 0.54.2
Native version: 0.55.3

Make sure that you have rebuilt the native code. If the problem persists try clearing the Watchman and packager caches with `watchman watch-del-all && react-native start --reset-cache`."
checkVersions
    index.delta?platform=android&dev=true&minify=false:13945:20
<unknown>
    index.delta?platform=android&dev=true&minify=false:12212:40
loadModuleImplementation
    index.delta?platform=android&dev=true&minify=false:159:14
guardedLoadModule
    index.delta?platform=android&dev=true&minify=false:84:47
_require
    index.delta?platform=android&dev=true&minify=false:73:79
global code
    index.delta?platform=android&dev=true&minify=false:122369:8


```
watchman watch-del-all

react-native start --reset-cache

react-native run-android


```