ReactNativeでHello Worldしてみる

タイトルの通りReactNativeでハロワしてみます

facebook.github.io

Getting startedしていきます

facebook.github.io

まずはexpo-cliを入れるらしいです。

$ npm install -g expo-cli

expo-cliがなんなのかわからないのでググってみます

docs.expo.io

Expo CLI is a command line app that is the main interface between a developer and Expo tools. You'll use it for a variety of tasks, such as: Creating new projects Developing your app: running the project server, viewing logs, opening your app in a simulator Publishing your app JavaScript and other assets and managing releasing them over the air Building binaries (apk and ipa files) to be uploaded to the App Store and Play Store Managing Apple Credentials and Google Keystores

正直いまいちピンときていませんが、プロジェクトを作ったりリリースしたりするためのツールみたいです。触ってみたほうが理解が早そうな気がします。

プロジェクトを作ります。とりあえず名前はGetting startedと同じAwesomeProjectとします。

$ expo init AwesomeProject

入力待ちになりました。

? Choose a template: expo-template-blank

? Please enter a few initial configuration values.
  Read more: https://docs.expo.io/versions/latest/workflow/configuration/ ‣ 50% completed
 {
   "expo": {
     "name": "<The name of your app visible on the home screen>",
     "slug": "AwesomeProject"
   }
 } 

The name of your app visible on the home screenらしいのでHello Worldとしてみます

? Choose a template: expo-template-blank

? Please enter a few initial configuration values.
  Read more: https://docs.expo.io/versions/latest/workflow/configuration/ ‣ 100% completed
 {
   "expo": {
     "name": "Hello World",
     "slug": "AwesomeProject"
   }
 }  

※Yarn使うかって聞かれたのでYにしました

$ cd AwesomeProject
$ yarn start

ブラウザが立ち上がってこういうのが出てきました

Install the Expo client app on your iOS or Android phone

とのことなので自分のスマホにexpo clientをインストールします

さらに

and connect to the same wireless network as your computer.

らしいので、ブリッジ接続できるようにネットワーク設定します。

expo clientアプリを立ち上げてQRコードを読み込んでみるとこんなのが出てきました。

うまくいってるみたいです。

Now that you have successfully run the app, let's modify it. Open App.js in your text editor of choice and edit some lines. The application should reload automatically once you save your changes.

とのことなのでApp.jsを修正してみます。

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
-      <Text>Open up App.js to start working on your app!</Text>
+      <Text>こんにちは 世界</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

でました