開発者ドキュメント

React NativeElementsUI入門

getdocs

序章

React Native Elements は、 React Nativeコンポーネントに基づいて構築された、ビルド済みのコンポーネントを備えたスタイリングライブラリです。 React Native Elementsのすべてのコンポーネントは、指定した小道具に基づいたスタイルのReact Native<View />コンポーネントでラップされています。

React Native Elementsの主な目的は、基本的なReact Nativeコンポーネントの上に構築して、アプリ全体のテーマをより柔軟に、簡単に作成できるようにすることです。 アプリ全体のCSSを作成したことがある場合は、時間を節約して、何度も何度も作成するのではなく、一度だけ作成する方法を見つけたことがあるでしょう。 React Native Elementsを使用すると、ビルド済みのコンポーネントを使用し、それらをカスタマイズまたは拡張して、同じ小道具を再利用できます。

注：この記事全体を通して、ReactNativeElementsをRNEと略記します。

この記事では、ReactNativeElementsが提供するいくつかのコンポーネントについて説明します。 ここで学んだことを他のコンポーネントに適用することができます。

前提条件

この記事をフォローしたい場合は、次のものが必要になります。

このチュートリアルは、ノードv16.4.0、npm v7.19.0、react v16.13.1、react-native v0.63.4、およびreact-native-elementsv3.4.2で検証されました。 。

プロジェクトの設定

まず、create-react-native-appを使用して、新しいReactNativeアプリケーションを作成します。

  1. npx create-react-native-app

新しいプロジェクトを作成するためのプロンプトに答えます。 次に、新しいプロジェクトディレクトリに移動します。

次に、react-native-elmentsをインストールします。

  1. npm install react-native-elements@3.4.2

ライブラリがインストールされたので、使用する準備が整いました。次のように、ライブラリから任意のコンポーネントをインポートできます。

import { Text } from 'react-native-elements';

たとえば、このコードはTextコンポーネントを使用できるようにします。

Textコンポーネントの使用

React NativeElementの<Text />コンポーネントは、ReactNativeの<Text />コンポーネントを拡張して、スタイルを設定するためのより多くの小道具を備えています。

フォントサイズが事前に構成されており、h1、h2、h3、またはh4のいずれかを使用して利用できます。 対応するフォントサイズは、40、34、28、および22です。

h1Style、h2Styleなど、見出しのサイズごとに小道具があります。 これらは、テキストの周りのコンテナに適用されます。

次に例を示します。

import React from 'react';
import { SafeAreaView, StyleSheet } from 'react-native';
import { Text } from 'react-native-elements';

export default function App() {
  return (
    <SafeAreaView>
      <Text
        h1
        h1Style={styles.h1}
      >
        Your Heading
      </Text>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  h1: {
    backgroundColor: '#00f',
    padding: 10,
  },
});

小道具h1は、すべての主要な見出しがアプリ全体で同じサイズであることを保証します。 また、h1Styleは、何らかの理由でコンテナーのスタイルを設定したい場合に、その周囲のコンテナー用です。

詳細については、Textの公式ドキュメントを参照してください。

Buttonコンポーネントの使用

前に説明したように、RNEのすべてのコンポーネントはすでに<View />にラップされています。 これは、上記の<Text>コンポーネントのh1styleによってスタイル設定されたコンテナーです。 これにより、親コンテナ<View />コンポーネントを手動で追加する必要がなくなります。 containerStyleを使用して、この親コンテナーにスタイルを追加できます。

たとえば、次の例を見てください。

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

export default function App() {
  return (
    <SafeAreaView>
      <Button
        containerStyle={{ height: 500 }}
        buttonStyle={{ height: '100%' }}
        title='button title'
      />
    </SafeAreaView>
  );
}

このコードでは、RNE <Button />内の<View>コンポーネントは、containerStyleによって500の高さになるようにスタイル設定されています。 ただし、buttonStyle={{height: '100%'}}を含めなかった場合、ボタンはデフォルトの高さのままになります。 Viewのみが画面の500ピクセルを占有します。 ここで、buttonStyleプロップに100%の高さを指定すると、Viewの高さ全体が埋められます。 buttonStyleはButton自体のスタイルを設定しました。 このパターンは、ほとんどすべてのRNEコンポーネントで使用されています。

ボタンを与えるために他のたくさんのスタイルがあります。 このコンポーネントのデフォルトは、iOSではTouchableOpacity、AndroidではTouchableNativeFeedbackであることに気付いたかもしれません。 これらのデフォルトは、TouchableComponentプロップで変更できます。

TouchableComponent={TouchableHighlight}

ボタンのtypeを"clear"、"outline"、またはデフォルトの"solid"に設定できます。

raisedプロップを追加して、ボタンにボックスシャドウで浮き上がった外観を与えることもできます。

ボタンにスタイルを追加する方法は他にもたくさんあります。

詳細については、Buttonの公式ドキュメントを参照してください。

Iconコンポーネントの使用

アイコンはreact-native-vector-iconsから可能です。

iconプロップを使用してボタンにアイコンを配置することもできます。 これはいくつかのコンポーネントの小道具であり、Iconコンポーネント、またはオブジェクトを挿入できます。 デフォルトでは、アイコンはボタンの中央に配置され、titleプロップにテキストがある場合は、テキストの左側にプッシュされます。 iconRightプロップを使用して、これをテキストの右側に切り替えることができます。

Iconコンポーネント内では、nameプロップが重要です。これは公式のアイコン名と一致し、見つからない場合は、目的のアイコンの代わりに疑問符のみが表示されます。

これがサポートされているアイコンの完全なリストです。 各セクションには、アイコンのtypeを示す見出しがあります。 これには、"entypo"、"feather"、および"fontawesome"が含まれます。 アイコンのデザインは、多くの場合、typeごとに異なります。

次に例を示します。

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

export default function App() {
  return (
    <SafeAreaView>
      <Button
        icon={{ name: "mail", size: 15, type: 'entypo', color: "black" }}
        iconRight
        title="Mail"
      />
    </SafeAreaView>
  );
}

このコードは次のようになります。

上記の例のオブジェクトを次のように置き換えることもできます。

import React from 'react';
import { SafeAreaView } from 'react-native';
import { Button, Icon } from 'react-native-elements';

export default function App() {
  return (
    <SafeAreaView>
      <Button
        icon={<Icon name="mail" size={15} type="entypo" color="white" />}
        iconRight
        title="Mail"
      />
    </SafeAreaView>
  );
}

これはRNE<Icon />コンポーネントを使用しており、RNEでアイコンを使用するときはいつでも、どちらの方法でも実装できます。

繰り返しになりますが、すべてのReact NativeElementsコンポーネントは<View>でラップされているため、一般的に信頼できる小道具の1つはcontainerStyleです。これは、ここで<Icon />に適用されます。 次に、buttonStyleの代わりに、iconStyleを使用してアイコン自体のスタイルを設定できます。 もちろん、これは、組み込みの小道具を超えてスタイリングしたい場合にのみ必要です。 ここで、違いを理解することが重要です。親<Button />の小道具を使用してiconContainerStyleを使用してアイコンコンテナのスタイルを設定できます。これは、containerStyle小道具と同じです。 <Icon />コンポーネント内。

reverseプロップを使用して、アイコンをボタンに似せることもできます。 アイコンの後ろに円形の境界線がありますが、デフォルトでは表示されません。 reverseを使用すると、アイコンは白になり（reverseColorで特に設定しない限り）、円の背景色は指定したcolorで塗りつぶされます（デフォルト黒に）。 アイコンにraisedプロップを指定すると、reverseもない限り、円の背景がデフォルトの白い塗りつぶしで表示されます。 円の背景には、アイコン自体ではなく、raisedボックスシャドウが表示されます。

詳細については、Iconの公式ドキュメントを参照してください。

SearchBarおよびInputコンポーネントの使用

RNEの非常に便利なコンポーネントの1つは、<SearchBar />です。 RNE <Input />コンポーネントと同じように、標準の<TextInput />が持つすべての小道具から始まりますが、いくつかのスタイルの小道具が追加されます。 いくつかの名前の違いに加えて、<SearchBar />は主にRNE<Input />の特殊バージョンにすぎません。 ゲートのすぐ外にある<SearchBar />には、左端に虫眼鏡アイコンがあり（これはデフォルトのsearchIconプロップです）、背景は暗いです。 searchIconプロップは、より一般的な<Input />を使用する場合、基本的にleftIconプロップです。

入力を開始すると、右端にxが表示されます。 これはデフォルトのclearIconプロップです。これは<Input />コンポーネントを使用する場合のrightIconプロップと同等です。 x アイコンを押すと、テキストがクリアされます。これは、onClearコールバックプロップで処理できます。

覚えておくべき重要なことの1つは、アイコンにはスタイル設定可能なコンテナーが付属していることです。leftIconContainerStyleまたはrightIconContainerStyleでスタイル設定できます。 これは、<Icon />自体ではなく、<SearchBar />コンポーネントのアイコンコンテナのスタイルを設定します。

キャンセルボタンは少し注意が必要ですが、表示させる1つの方法は次のとおりです。

import React from 'react';
import { SafeAreaView } from 'react-native';
import { SearchBar } from 'react-native-elements';

export default class App extends React.Component {
  state = {
    search: '',
  };

  updateSearch = (search) => {
    this.setState({ search });
  };

  render() {
    const { search } = this.state;

    return (
      <SafeAreaView>
        <SearchBar
          platform='ios'
          cancelButtonTitle='cancel'
          onChangeText={(search) => { this.updateSearch(search) }}
          value={search}
        />
      </SafeAreaView>
    );
  }
}

このコードは次のようになります。

プラットフォームを'ios'に設定し、cancelButtonTitleを任意のテキストに設定すると、SearchBarがフォーカスされているときにボタンが両方のプラットフォームに表示されます（デフォルトの動作）。 onCancelコールバックをトリガーします。 このキャンセルボタンを追加すると、デフォルトのダークテーマがオフになります。

<SearchBar>コンポーネントでは、<View />をcontainerStyleで設定できます。ここで、SearchBarには、内部コンテナのスタイルを設定するためのプロップinputContainerStyleがあります。内のTextInputの周り。 テキストを書き込むボックスであるTextInputのスタイルを設定するには、inputStyleを使用します。これにより、テキストコンテナのスタイルが設定されますが、アイコンは含まれません。 inputContainerStyleコンテナにはアイコンが含まれています。 これらは<SearchBar />および<Input />と同じです。<SearchBar />のデフォルトは、containerStyleにパディングがあり、inputContainerStyleに丸い境界線があります。 。

<SearchBar />と<Input />の違いの1つは、上記の例に示すように、検索にはvalueの設定が必要なようです。 それとonChangeTextコールバックが値を更新しないと、何も入力できません。 これは<Input />には当てはまりません。 また、<Input />コンポーネントを使用すると、ラベルとエラーメッセージを設定できます。それぞれが外側の<View />内にあります。

結論

この記事では、React Native Elementsが提供するコンポーネントのいくつかについて説明しました：Text、Button、Icon、SearchBar、および [X140X ]。

React Native Elementsには、アプリケーションをカスタマイズするためのコンポーネントと方法がたくさんあります。 多くの構築済みの小道具があり、時間を大幅に節約し、手動でのスタイリングやピクセルごとの要素の移動にかかる時間を節約できます。

優れた<Rating />コンポーネントなど、ここで説明した以上のものがありますが、ここでの基本的な理解があれば、残りのコンポーネントがどのように機能するかを理解できるはずです。

公式ドキュメントは、コンポーネントを調べて、各コンポーネントで使用できる小道具とその実装方法を見つけるのに最適な場所です。

モバイルバージョンを終了