はじめてのreact-nativeでHelloWolrd

何を書くの？

react-nativeのアプリ、特にiOSのHello-World的なことをします。

なぜ書くの？

副業でお世話になってる、ヘルスケアのベンチャー企業で、急遽iOSのアプリを書くことになったのですが、アプリ系は全くなので0から勉強しようと思って、やったことを書こうと思います。

何をしたの ?

やったことは、下記になります。

環境準備

この辺を参考にして、構築しました。といっても、x-code、homebrew、node、react-nativeといったものは既にインストール済みだったので、やったのは下記のライブラリのインストールでした。

brew install watchman

qiita.com rara-world.com

Hello Worldの実行

プロジェクトの作成

下記のコマンドを実行して、プロジェクトの雛形を作成しました。諸々の必要なパッケージがインストールされます。

$ react-native init iOSTest
$ cd iOSTest && npm i
$ tree -L 1
.
├── App.js
├── __tests__
├── android
├── app.json
├── babel.config.js
├── index.js
├── ios
├── metro.config.js
├── node_modules
├── package-lock.json
└── package.json

Hello Worldのアプリ作成

Hello World! とだけ表示されるアプリを作成しました。デフォルトでReactのチュートリアル的な画面が表示されますが、それはコメントアウトして表示されないようにしました。デフォルトの変更差分には日本語でコメントを書きました。

$ cat index.js 
/**
 * @format
 */

// View, Textの追加
import {View, Text, AppRegistry} from 'react-native';
// このファイル内にAppを作成するため、App.js(React-Nativeのチュートリアルぽい綺麗なページを表示する)のimportをコメントアウト
// import App from './App';
import React from 'react';
import {name as appName} from './app.json';

// 以下、Hello Worldを表示するviewの作成
const App = () => {
  const {textStyle, viewStyle} = styles;

  return (
    <View style={viewStyle}>
      <Text style={textStyle}>Hello World!</Text>
    </View>
  );
};

const styles = {
  viewStyle: {
    backgroundColor: '#ebebeb',
    justifyContent: 'center',
    alignItems: 'center',
    height: '100%',
  },
  textStyle: {
    fontSize: 40,
  },
};

AppRegistry.registerComponent(appName, () => App);

困ったこと

最初に、 react-native init iOSTest で作成したディレクトリで run-ios したら上手くいかなかった。
- ディレクトリ消して、再び init しました。

$ react-native run-ios
Command `run-ios` unrecognized. Make sure that you have run `npm install` and that you are inside a react-native project.

run-ios したら上手くいかなかった。
- これも再度、 run-ios で解決した。

$ react-native run-ios
info Found Xcode workspace "iOSTest.xcworkspace"
error Could not parse the simulator list output. Run CLI with --verbose flag for more details.
SyntaxError: Unexpected token I in JSON at position 0
    at JSON.parse (<anonymous>)
    at runOnSimulator (/Users/kazu/workspace/iOSTest/node_modules/@react-native-community/cli-platform-ios/build/commands/runIOS/index.js:130:23)
    at Object.runIOS [as func] (/Users/kazu/workspace/iOSTest/node_modules/@react-native-community/cli-platform-ios/build/commands/runIOS/index.js:100:12)
    at Command.handleAction (/Users/kazu/workspace/iOSTest/node_modules/react-native/node_modules/@react-native-community/cli/build/index.js:164:23)
    at Command.listener (/Users/kazu/workspace/iOSTest/node_modules/commander/index.js:315:8)
    at Command.emit (events.js:209:13)
    at Command.parseArgs (/Users/kazu/workspace/iOSTest/node_modules/commander/index.js:651:12)
    at Command.parse (/Users/kazu/workspace/iOSTest/node_modules/commander/index.js:474:21)
    at setupAndRun (/Users/kazu/workspace/iOSTest/node_modules/react-native/node_modules/@react-native-community/cli/build/index.js:237:24)
    at Object.run (/Users/kazu/workspace/iOSTest/node_modules/react-native/node_modules/@react-native-community/cli/build/index.js:184:11)

Hello Worldのアプリ作成したらこんな画面になった。
- これ見ながら、build cacheの削除で解決しました。

f:id:kazu_0716:20200211014406p:plain — エミュレータのエラー画面

やってみた感想

Reactに関しては、社内の研修をそれなりに受けたので、ほぼ実務経験はないですが、なんとなく理解でき、そして過去 NativeのAndroidのアプリを Android-Java で開発したことがあったのですごく簡単にアプリが作れるなと思いました。

React-Nativeの理解を進めていくことで、今後もっと複雑なアプリが書けるように精進しようと思います。次は、Backendと連携して、Viewを変更するやつとかやってみようかな、と思います。

EAFP

~ Easier to Ask for Forgiveness than Permission ~