ReactNativeアプリ開発 -環境構築から動作確認まで

ReactNativeでアプリを開発してみようと思ったので、そのときに詰まった内容などをメモしておく

1. ReactNativeインストール

公式ガイド

npmがインストール済みの前提で

$ npm install -g expo-cli

次に、プロジェクト作成

$ expo init [プロジェクト名]

プロジェクト作成すると、下記のような.gitignoreもセットで作成されるという親切仕様

node_modules/**/*
.expo/*
npm-debug.*
*.jks
*.p8
*.p12
*.key
*.mobileprovision
*.orig.*
web-build/
web-report/
# macOS
.DS_Store

2. コメント文の書き方

React JSX コメントを書きたい！
こちらのサイトにある通り、最低限一行コメントと複数行コメントを抑えておく

一行コメント
{
	// ここがコメントになる（行末までコメントなので、改行必須）
}
{
	/* ここがコメントになる */
}

複数行コメント
{
	/*
  ここがコメントになる
*/
}

3. 文言の修正

App.tsxが一番最初に触るファイル

import React from 'react'
import { StyleSheet, Text, View } from 'react-native'
export default function App() {
	return (
		<View style={styles.container}>
			<Text>Open up App.tsx to start working on your app!</Text>
			<Text>ほげほげ</Text>
			{/* ここを変える */}
		</View>
	)
}
const styles = StyleSheet.create({
	container: {
		flex: 1,
		backgroundColor: '#fff',
		alignItems: 'center',
		justifyContent: 'center'
	}
})

4. 動作確認

公式ガイドの通り、

$ npm start

で実行(2020/05/07 時点)。Run in web browserをクリック

https://localhost:19006/ のタブが新しく立ち上がり、起動画面が出るので、いったん動作確認としては終了