ReactNativeでExpoを使ってみる

f:id:utr066:20180224202637p:plain

公式サイトに従って入れてみる。 Getting Started · React Native

Nodeが入っていることが前提みたいなことが書かれているので、Node が入ってなかったら入れる。

node入れたら下のコマンドを打つ。

npm install -g create-react-native-app

プロジェクトを作ってみる。

create-react-native-app AwesomeProject

We suggest that you begin by typing:

  cd AwesomeProject
  yarn start

こんなことを言われるので、疑わずに従う。

See https://git.io/v5vcn for more information, either install watchman or run the following snippet:
  sudo sysctl -w kern.maxfiles=5242880
  sudo sysctl -w kern.maxfilesperproc=524288

起動しない。kern.maxfilesってなんだ。

調べてみると、カーネルパラメータに含まれるもの？

OSの根幹であるカーネルの設定がちょっとあかんのか。

$ sysctl kern.maxfiles

上記を実行すると、kern.maxfilesが出てくるから確認してみるのもいいかもしれない。

とりあえず、ターミナルの画面に出てきた通りにやってみる。

$  sudo sysctl -w kern.maxfiles=5242880
$  sudo sysctl -w kern.maxfilesperproc=524288

$ yarn start

今度は起動できた。

でっかいQRコードが出てきて、読み込んでねって言われる。

playストアから「Expo」と検索してダウンロードして読み込んでみる。

そしたら、ターミナルの方に連携した自分のスマホ情報が出てきた。なんかすごい。

Open up App App.js to start working on your App!

スマホの方に上のように書れているのでApp.jsを開いてみる。

      <View style={styles.container}>
        <Text>Open up App.js to start working on your app!</Text>
        <Text>Changes you make will automatically reload.</Text>
        <Text>Shake your phone to open the developer menu.</Text>
      </View>

f:id:utr066:20180217001203j:plain

なるほど、この部分がスマホの方で表示されていたのか。

      <View style={styles.container}>
        <Text>こんにちは</Text>
        <Text>Changes you make will automatically reload.</Text>
        <Text>Shake your phone to open the developer menu.</Text>
      </View>

文言をこんな風にすると、スマホの方の文言も変更される。

f:id:utr066:20180217001206j:plain