1
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

posted at

updated at

ReactNative を触ってみる

初期構築

必要なパッケージをインストール

$ 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のプロジェクトにアプリを追加

  1. iOSアプリに設定したバンドルIDを設定
  2. App Store ID は後で設定する
  3. 設定ファイル(GoogleService-Info.plist)をダウンロードする
  4. 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

Register as a new user and use Qiita more conveniently

  1. You can follow users and tags
  2. you can stock useful information
  3. You can make editorial suggestions for articles
What you can do with signing up
1
Help us understand the problem. What are the problem?