Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
2
Help us understand the problem. What is going on with this article?
@sabineko

ReactNative Elementsで簡単にUIを作る

More than 1 year has passed since last update.

React Nativeを入れてまずはUIを作りたい!となったとき、何をどうすればいいのかわかりませんでした…。
色々調べているうちに、ReactNative ElementsとNative Baseという有名なライブラリがあるということが判明。2つを見比べてみて、なんとなく見た目が良かったReactNative Elementsを使ってみることにしたので、導入手順をメモしておきます。

公式ドキュメント

ReactNative&TypeScriptの環境構築手順

インストール

最初にreact-native-vector-iconsをインストールします。コレを入れておくと簡単にアイコンが使えます。アイコンすでに準備してあるからいらない、と思ってインストールしなかったら、ビルドでエラーが出て「react-vector-iconsがない」と言われたので、ReactNative Elementsを使う場合は必須ぽいです。

$ npm install react-native-vector-icons --save
$ react-native link react-native-vector-icons

で、ReactNative Elements本体をインストールします。

$ npm install react-native-elements --save

使い方

試しにボタンをつけてみる(App.tsx)

// 他のimportは省略
import { Button } from 'react-native-elements'

type Props = {};
export default class App extends Component<Props> {
  private tsText: string = "&TypeScript";   // とりあえず型を使ってみる
  // ボタンのクリックイベント
  click(){
    alert('(☝ ՞ਊ ՞)☝ウェーイ');
  }
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>Welcome to React {this.tsText}!</Text>
        {/* ↓ここから下がReactNative Elements */}
        <Button 
          large
          backgroundColor='#53DCD0'
          icon={{name: 'android'}}// nameにアイコン名を指定
          title='Weeei Button!'
          onPress={this.click}
        />
      </View>
    );
  }

stylesの記述は省いてますが、こんなふうにApp.tsxを記述すると、Androidアイコンのボタンが作れます。
AndroidStudioの設定がうまくいかなかったのでiOSシミュレータを使って表示しました。
スクリーンショット 2018-10-23 13.24.47.png
ボタンをクリックすると…
スクリーンショット 2018-10-23 13.25.51.png
iOSデフォルトのアラートが表示されます。

アイコンはここにのってるものなら表示できるようです。これはイチからアプリを作るのに便利かも。ということで導入編でした。

次からはアプリっぽいUIを作っていきます。

参考サイト

2
Help us understand the problem. What is going on with this article?
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
sabineko
フロントエンドメインにやってるweb屋。 だいたい仕事で困ったことをメモしてます。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
2
Help us understand the problem. What is going on with this article?