React入門

【デザイン】ReactNative Elementsで今風UIを構築してみよう

【デザイン】ReactNative Elementsで今風UIを構築してみよう
おにちゃん
おにちゃん

本記事ではReact Native Elementsの使い方について詳しく解説しています。

随時、使い方などはアップデートしていきます。

ReactNative Elementsとは

ReactNative Elementsとは

ReactNative Elementsとは

React Native Elementsとは、React Native用のUIライブラリです。

初心者でも簡単にUIを構築することができることから、近年人気が高まっています。

おにちゃん
おにちゃん

そんなReact Native Elementsでは、モバイルアプリ開発+Webアプリ開発の両方で使えます

 

ReactNative Elementsで作れるもの一覧

ReactNative Elementsで作れるもの一覧

ReactNative Elementsで作れるもの一覧

ReactNative Elementsで作れるものには下記のようなものがあります。

  • アバター
  • バッジ
  • ボトムシート
  • ボタン
  • カード
  • チェックボックス
  • チップ
  • 仕切り
  • ヘッダ
  • アイコン
  • 画像
  • 入力
  • リストアイテム
  • 価格設定
  • 検索バー
  • スライダー
  • スイッチ
  • タブ
  • テキスト

本記事ではよく使われる5つのUIを紹介していきます。

 

ReactNative ElementsのButton

Buttonは下記のコードで実行が可能です。

import React from 'react';
import {View} from 'react-native';
import {Button} from 'react-native-elements';

export function ElementsScreen () {
  const click = () => {
    alert('ボタンを押したよ')
  }
  return (
  <View>
    <Button 
    title="ボタン"
    background="red"
    onPress={click}
    />
  </View>
  )
}

 

 

ReactNative Elementsのcheckbox

checkboxは下記のコードで実行可能です

import React from 'react';
import {View,} from 'react-native';
import styles from '../style';
import {CheckBox} from 'react-native-elements';

export function ElementsScreen () {
  return (
  <View style={styles.container}>
    <CheckBox
    title="click here"
    />
  </View>
  )
}

 

ReactNative Elementsのavatar

avatarは下記のコードで実行可能です

import React from 'react';
import {View,} from 'react-native';
import styles from '../style';
import {Avatar} from 'react-native-elements';

export function ElementsScreen () {
  return (
    <View style={styles.container}>
      <Avatar 
      rounded
      size="xlarge"
      source={{
        uri: 'https://onityanzyuku.com/wp-content/uploads/2019/12/IMG_2910-2.jpg',
      }}
      />
    </View>
  )
}

 

 

ReactNative Elementsのinput

inputは下記のコードで実行可能です

import React from 'react';
import {View} from 'react-native';
import {Input} from 'react-native-elements';
import styles from '../style';

export function ElementsScreen () {
  return (
    <View style={styles.container}>
      <Input
      placeholder="メールアドレス"
      />
      <Input 
      placeholder="パスワード"
      />
    </View>
  )
}

 

ReactNative Elementsのcard

cardは下記のコードで実行できます。

import React from 'react';
import {View} from 'react-native';
import {Card, Text,} from 'react-native-elements';
import styles from '../style';

export function ElementsScreen () {
  return (
    <View style={styles.container}>
      <Card>
      <Card.Title>HELLO WORLD</Card.Title>
      <Card.Divider/>
     <Text style={{marginBottom: 10}}>
      The idea with React Native Elements is more about component structure than actual design.
      </Text>
     </Card>
    </View>
  )
}

 

ReactNativeが学べる教材

ReactNativeが学べる教材

ReactNativeが学べる教材

おにちゃん塾がUdemyで購入してよかった教材です。

おにちゃん
おにちゃん

他のUdemy教材に手を出すくらいならこの2つを購入した方が学習効率が良いです。

 

まとめ:ReactNative Elements

まとめ:ReactNative Elements

まとめ:ReactNative Elements

ここまでで【デザイン】ReactNative Elementsで今風UIを構築してみようについて解説してきました。

おにちゃん
おにちゃん

本記事は以上です。

 

読者におすすめの記事

【2021年版】ReactNativeはオワコンなのか?結論:厳しい
【2021年版】ReactNativeはオワコンなのか?結論:厳しいReactNativeはオワコンなのか。結論から言うと、オワコンだと思います。ただ、僕は挑戦してみます。...
【基礎入門】ReactNativeとは?環境構築からメモアプリまでを解説
【基礎入門】ReactNativeとは?環境構築からメモアプリまでを解説ReactNativeとはアプリ開発用のフレームワークです。本記事では基礎入門としてReactNativeの環境構築〜メモアプリまでを解説しています。...
【React入門】Reactとは?UI構築のためのJSライブラリ
【React入門】Reactとは?UI構築のためのJSライブラリReact入門|Reactでの開発環境、todoアプリ、chatbotアプリなどを開発できるコンテンツ|日々更新しています。...
ABOUT ME
アバター
鬼澤龍平(20)
Twitterにて役立つ情報を掲載しております。
関連記事