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

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

1. ReactNativeインストール

公式ガイド
https://reactnative.dev/docs/environment-setup

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. コメント文の書き方

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/ のタブが新しく立ち上がり、下記の画面が出るので、いったん動作確認としては終了

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です