おにちゃん塾の商品一覧

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

【デザイン】ReactNative Elementsで今風UIを構築してみよう
URLをコピーする
URLをコピーしました!
おにちゃん

本記事では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を構築してみようについて解説してきました。

おにちゃん

本記事は以上です。

読者におすすめの記事

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

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
URLをコピーする
URLをコピーしました!
目次
閉じる