Help us understand the problem. What is going on with this article?

【React Native】NativeBase導入

More than 1 year has passed since last update.

NativeBase

NativeBase は React Native で使用できるUIコンポーネントです。 iOS/Android それぞれに適切なUIを提供し、汎用性のあるコンポーネントを簡単に導入できます。

https://github.com/GeekyAnts/NativeBase

環境構築

作成したプロジェクトに対して以下のコマンドでNativeBaseを導入します。

$ npm install native-base --save

以下のようなメッセージが出てインストールが完了します。

┌────────────────────────────────────────────────────────────────────────────────────────────┐
│ NativeBase 2.0 has been succesfully installed!                                             │
│ Run `node node_modules/native-base/ejectTheme.js` to copy over theme config and variables. │
│ Head over to the docs for detailed information on how to make changes to the theme.        │
└────────────────────────────────────────────────────────────────────────────────────────────┘

※ 公式サイトなどではこれでOKのはずですが、以降の作業でうまくいかなかったので、下記コマンドを再度実行することで、インストールが最終的な完了状態となるようです。

$ npm install

続いて、以下のコマンドで NativeBase が iOS/Android プロジェクトに「リンクが必要」であることを指定します。

$ react-native link

参考:"react-native link" は何をするか
https://qiita.com/lazyppp/items/8d5969cd9a5b53587e18

アプリ作成

App.js を以下のように書き換えて NativeBase のコンポーネントが使用可能なことを確認します。(「Headerコンポーネント」でiOSでのナビゲーションバー、Androidでのアプリバーを表示してみます)

import React, {Component} from 'react';
import { Container, Header, Left, Body, Right, Button, Icon, Title } from 'native-base';

type Props = {};
export default class App extends Component<Props> {
  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>
    );
  }
}

iOS

ios.png

Android

android.png

リポジトリ

本記事で作成したものは以下で公開していますので、参考にしてください。
https://github.com/k-neo/ReactNativeCourseNativebase

keneo
リモート開発、在宅勤務を特色とするシステム開発会社ローラハウスの代表をしています。またランニングが趣味で「走るプログラマー」というキャッチフレーズで活動しています。Web系システム、スマートフォンアプリの開発のご用命はお気軽に!
http://laurahouse.net
laurahouse
北海道を拠点にしてリモートワークでのスマートフォンアプリの開発を得意とするエンジニアによる技術者集団です。スマートフォンアプリの開発のご用命はお気軽に!
http://laurahouse.net
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした