初期構築
必要なパッケージをインストール
$ brew install watchman
$ npm install -g react-native-cli
ReactNativeアプリケーションを作成
$ react-native init <アプリ名>
? CocoaPods (https://cocoapods.org/) is not installed. CocoaPods is necessary for the iOS project to run correctly. Do you
want to install it?
○ Yes, with Gem
● Yes, with Homebrew
Homebrewによるcocoapodsのインストールに失敗した場合
以下エラーが発生する場合あり
The formula built, but is not symlinked into /usr/local
Could not symlink bin/pod
Target /usr/local/bin/pod
already exists. You may want to remove it:
rm '/usr/local/bin/pod'
To force the link and overwrite all conflicting files:
brew link --overwrite cocoapods
To list all files that would be deleted:
brew link --overwrite --dry-run cocoapods
brew doctorで見てみても下記のようなWarningが確認できる
$ brew doctor
Warning: You have unlinked kegs in your Cellar.
Leaving kegs unlinked can lead to build-trouble and cause brews that depend on
those kegs to fail to run properly once built. Run `brew link` on these:
cocoapods
cocoapodsのリンクが作成出来ていないようなので、指示にしたがって作成する
よく分からないけれど強制的に上書きしてしまう
$ brew link --overwrite cocoapods
cocopodsによるライブラリのインストールに失敗しているはず（以下エラーが発生）
(node:6594) UnhandledPromiseRejectionWarning: Error: Failed to install CocoaPods dependencies for iOS project, which is required by this template.
Please try again manually: "cd ./<アプリ名>/ios && pod install".
なので、これも指示にしたがってインストールを実行する
$ cd <アプリ名>/ios
$ pod install
※あらかじめHomebrewでcocoapodsをインストールしてからreact-native initを行えば早いかも知れない
ビルド
$ react-native run-ios
Ctrl + R でリロード
パッケージの導入
eslintの導入
コマンド
$ npm install --save-dev eslint
$ ./node_modules/.bin/eslint --init
? How would you like to use ESLint? To check syntax and find problems
? What type of modules does your project use? JavaScript modules (import/export)
? Which framework does your project use? React
? Does your project use TypeScript? No
? Where does your code run? Browser
? What format do you want your config file to be in? JSON
The config that you've selected requires the following dependencies:
react-navigationの導入
コマンド
$ npm install react-navigation
# 参考：https://qiita.com/zaburo/items/81c39f73216e87f443ea
$ npm install react-native-gesture-handler react-native-reanimated
$ cd ios
$ pod install
ex.) screens/Home.js
import React from 'react';
import {View, Text, Button} from 'react-native';
export default class Home extends React.Component {
render() {
return (
<View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
<Text>Home</Text>
</View>
);
}
}
ex.) App.js
import React from 'react';
import {createAppContainer} from 'react-navigation';
import {createBottomTabNavigator} from 'react-navigation-tabs';
// import screens
import Home from './screens/Home';
import List from './screens/List';
// Tab
const Tab = createBottomTabNavigator({
Home: {screen: Home},
List: {screen: List},
});
export default class App extends React.Component {
render() {
const Layout = createAppContainer(Tab);
return <Layout />;
}
}
native-baseの導入
コマンド
$ npm install native-base
$ react-native link
ex.) Home.js
import React from 'react';
import {Container, Header, Left, Body, Right, Button, Icon, Title} from 'native-base';
export default class Home extends React.Component {
render() {
return (
<Container>
<Header>
<Left>
<Button transparent>
<Icon name="arrow-back" />
</Button>
</Left>
<Body>
<Title>タイトル</Title>
</Body>
<Right>
<Button transparent>
<Icon name="menu" />
</Button>
</Right>
</Header>
</Container>
);
}
}
react-native-firebaseの導入
バンドルIDを設定
ex. ) com.sample.{アプリ名}
Firebaseのプロジェクトにアプリを追加
- iOSアプリに設定したバンドルIDを設定
- App Store ID は後で設定する
- 設定ファイル（GoogleService-Info.plist）をダウンロードする
-
iOS/{プロジェクト名}直下にGoogleService-Info.plistを配置する- 上手くいかなかった場合は、xcodeから配置してみる
コマンド
$ npm install react-native-firebase
Podfileに以下を追加
pod 'Firebase/Core'
pod 'Firebase/Firestore' # Firestoreを使いたいのでこれも追加
AppDelegate.hに以下を追加
@import Firebase; // ←追加
AppDelegate.mに以下を追加
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
[FIRApp configure]; // ←追加
...
}
コマンド
$ cd ios
$ pod install
react-native-modal-datetime-pickerの導入
$ npm install react-native-modal-datetime-picker
state, props周り
実機デバッグ
コマンド
$ npm install -g ios-deploy
$ react-native run-ios --device "デバイス名"
$ react-native start --reset-cache
$ react-native run-ios