0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

react native の初期プロジェクト作成方法

Last updated at Posted at 2020-12-23

react native の初期プロジェクト作成方法について自分用に
まとまっているものが欲しく記事にしました

#1 react native のプロジェクト作成

まずは初期プロジェクトの作成

 npx react-native init MyApp --template react-native-template-typescript

#2 react native paper導入

現在使っているMaterial UIをベースにしたライブラリのreact native paperの導入手順

react native paper
 https://callstack.github.io/react-native-paper/index.html

yarn add react-native-paper
yarn add react-native-vector-icons

react-native-vector-iconsを使う場合は
手動でリンクする必要があるため下記手順を参考に登録する必要がある

#3 AWS amplify導入

初期設定(aws-amplify/cli)などの設定を除いた設定
通しの設定が必要な場合は下記を参照

AWS amplify Docs
 https://docs.amplify.aws/start/getting-started/installation/q/integration/react-native#option-2-follow-the-instructions

amplify init
yarn add aws-amplify aws-amplify-react-native amazon-cognito-identity-js @react-native-community/netinfo

npx pod-install

ソースコードへ下記を追加

import Amplify from 'aws-amplify'
import config from './aws-exports'
Amplify.configure(config)

そこから先の実装は下記URLを参照

AWS amplify Docs
 https://docs.amplify.aws/start/getting-started/installation/q/integration/react-native#option-2-follow-the-instructions

#4 react navigation導入

ページ遷移に必要なreact navigationの導入

react-navigation
https://reactnavigation.org/
 

yarn add @react-navigation/native
yarn add react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

#5 Pod install

iOS起動に必要なコマンドを実行し、完了

pod install
yarn ios

以上、とりあえず必要な初期プロジェクト作成方法について記載しました

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?