ReactNativeの基本コンポーネントを学ぶ

投稿日: 2022-04-20 2022-04-20
タグ: React

React Nativeは、Reactとよく似ており、 JSX 、状態、および小道具を実装しています。もちろん、React Nativeは、HTML要素ではなく、ネイティブコンポーネントに基づいて構築されています。したがって、通常のReactに精通している場合は、使用されているさまざまなコンポーネントを理解している限り、ReactNativeを簡単に理解できます。このガイドでは、ReactNativeが使用する基本的なネイティブコンポーネントについて説明します。

React for the webとは異なり、React Nativeでは、プロジェクト内の各コンポーネントをインポートする必要があります。結局のところ、各コンポーネントはAndroidとiOSの両方で機能するように設定されています。これが、JavaScriptですべてを記述できることは言うまでもなく、ReactNativeを使用する理由です。各コンポーネントをインポートするには、インポートしたオブジェクトに追加するだけです。

import { Text, View } from "react-native";

TextとViewは、ReactNativeアプリケーションの最も基本的な2つの構成要素です。 React Nativeを学ぶときに、誰もが始めるのに最適な場所です。

テキストと表示

ご想像のとおり、<Text></Text>はページ内のテキストのラッパーです。このコンポーネントは、HTMLの<p>タグに似ています。これで、<div></div>タグと同様に、<Text></Text>を<View></View>でラップします。そうです、<View>は<div>と非常によく似た動作をし、基本的な考え方は、ページを分割してスタイリングするのに最適なコンテナーであるということです。

ReactNativeページの基本的な設定は次のとおりです。

import React from "react";
import { View, Text } from "react-native";

export default class App extends React.Component {
  render() {
    return (
      <View>
        <Text> Hello World! </Text>
      </View>
    );
  }
}

<Text>と<View>の両方のコンポーネントには、色やサイズなどを設定できるスタイルの小道具があります。ただし、覚えておくべき重要な違いがいくつかあります。 Viewはdiv要素と同様に機能しますが、この<View>this text doesn't work</View>のようにテキストを折り返すことはできません（divを使用する必要はありません。 ]とにかく要素）。これにより例外が発生するため、<Text>コンポーネントを使用します。

<Text>コンポーネントと言えば、次のように別のコンポーネントをラップすることができます。

<Text style={{ color: red }}>
  <Text style={{ fontSize: 24 }}>Here is the first text </Text>
  <Text style={{ fontSize: 14 }}>And the second text.</Text>
</Text>

// comes out as 'Here is the first text And the second text'

<Text>が<Text>を折り返している場合、十分なスペースがあると仮定すると、ネストされたテキストは同じ行に表示されます。ただし、2つの<Text>コンポーネントが<View>でラップされている場合、それらは別々の行に表示されます。

TextInput

このコンポーネントは、<input> HTML要素にいくぶん似ていますが、その名前が示すように、テキスト入力専用です。 onChangeコールバックを使用する代わりに、onChangeTextを使用して、<TextInput>コンポーネントのテキストへの変更を検出できます。 onChangeを使用できますが、オブジェクト{ nativeEvent: { eventCount, target, text} }が返されます。

それ以外に、このコンポーネントにはたくさんのクールな機能があります。 keyboardType（keyboardType='email-address'など）を使用して電話でどのキーボードを引き上げるかを設定したり、自動修正機能を切り替えたり、電話のtextContentTypeを設定してテキストを自動入力したりできます。（キーチェーンのパスワードなど）、その他多数。

ボタンとアラート

<Button />コンポーネントは、その兄弟（HTML <button>要素）と大きな違いがあることに気付いた最初のコンポーネントです。 React Native <Button />には、クリック関連のものとは対照的に、onPress()プロップがあります。また、その中に入るテキスト用のtitleプロップもあります。最後に、スタイルプロップはなく、カラープロップのみがあります。

その最後の点はかなり大きな違いです。これで、ビューでラップし、そのラッパーでスタイルを設定できます（そしてそうするでしょう）。これは、React Nativeコンポーネントのいくつかの制限に対処するための一般的な方法であり、Viewを使用して他のコンポーネントを常にラップしていることに気付くでしょう。私がより頻繁に使用しているのは、後で説明するコンポーネント<TouchableOpacity >です。

この基本的なButtonコンポーネントについても興味深いと思ったのは、iOSプラットフォームでは、タイトルのテキストとしてのみ表示され、背景は表示されないことです。したがって、カラープロップはテキストの色のみを変更しますが、Androidではボタンの背景色を変更します。

Buttonコンポーネントの簡単な例を次に示します。

<Button
  onPress={() => Alert.alert("button pressed!")}
  title="alert button"
  color="blue"
/>

注：ReactNativeコアからもインポートされたAlertを使用しています。これにより、Web alert()と同様に、画面の上部にアラートが表示されます。

画像とImageBackground

<Image />コンポーネントは、HTMLimgタグと非常によく似ています。ただし、srcプロップをsourceに変更するなど、いくつかの違いがあります。また、ソース自体の動作も異なります。ローカルイメージの場合は、<Image source={require('path/to/local/image)} />のように、requireを使用してインポートします。

また、ソースプロップでは、<Image source={{uri: 'https://imagesite.com/path/to/image'}} style={{height: 100, width: 100, resizeMode: contain}}のようなURIを使用できます。 uriはオブジェクトであるため、インラインスタイルと同様に、中括弧の別のセットが必要であることに注意してください。ここでチェックする小道具は他にもたくさんありますが、一般的に使用する小道具はresizeModeです。これにより、画像のサイズを変更する方法と、画像を親Viewコンポーネント内に収める方法が決まります。

ImageBackgroundコンポーネントは、同じ小道具を受け取るという点で<Image />コンポーネントに似ていますが、ここでの主な違いは、子要素を持つことができることです。 <Image />コンポーネントは自動閉鎖です。 ImageBackgroundについてのことは、それはかなり基本的であり、背景画像を設定するためのより良い解決策は、独自のコンポーネントを作成するか、単にImageを不透明度を低くして背後にある絶対値として設定することです。すべての。

Touchables

React Nativeで気付くのは、ここで取り上げたコンポーネントの多くには、Webアプリに通常実装するすべての小道具が含まれていないことです。 <Image />コンポーネントにはonPressプロップがなく、<Button />コンポーネントにはstyleプロップがありません。 Touchableコンポーネントは、ここで本当に役立ちます。

たとえば、Touchableで任意の画像コンポーネントをラップできます。

<TouchableHighlight onPress={this.pressHandle}>
  <Image />
</TouchableHighlight>

上記の例のTouchableHighlightは、アニメーションが組み込まれているなど、押すと機能を備えた画像のコンテナのように機能します。 Touchableコンポーネント内にViewおよびTextコンポーネントを追加するだけで、<Button />と同じように機能しますが、スタイルをカスタマイズすることもできます。

現在、次のようないくつかの異なるTouchableコンポーネントがあります。

TouchableHighlight：押すと、背景が暗くなります。
TouchableOpacity：押すと、ボタンの不透明度が暗くなります。
TouchableNativeFeedback：Androidのみの波及効果。
TouchableWithoutFeedback：フィードバック/効果のないプレス。

これらのアニメーションは、押すと発生します。 Touchableコンポーネントには、独自の小道具もあり、好みに合わせてカスタマイズできます。

ScrollView、SafeAreaView、FlatList

これまで、ReactNativeアプリのすべての基本的な構成要素について見てきました。ただし、他にもたくさんあります。コンテンツの高さまたは幅が画面サイズを超えると、電話の画面が自動的にスクロールしないことがすぐにわかります。これは、すべてをViewコンポーネントでラップすると、オーバーフローが非表示になることに驚かれるかもしれません。

そこで、ScrollViewの簡単な実装が登場します。 ScrollViewコンポーネントは、スクロールを有効にするための基本コンポーネントです。ただし、FlatListでもスクロールが可能ですが、ScrollViewよりもはるかに大きな容量があります。

現在、ScrollViewの基本的な設定では、スクロール可能なビューに境界を設定しています。これは、画面の高さと幅である可能性があります。画像のように、ScrollViewをラップして、これらの境界を与えることができます。通常、これには通常のViewコンポーネントを使用できますが、iPhone Xを使用している場合は、Viewが丸みを帯びた角またはセンサークラスターの後ろに上がることがあります。 SafeAreaViewがこれを処理し、画面全体が表示されるように適切なパディングを提供します。どちらの方法でも、画面全体を拡大するには、親ビューのスタイルをflex: 1に設定するだけです。

ScrollViewを使用したこの設定は、すべての要素の高さがローカルで決定される場合に機能します。たとえば、ページの高さは常に同じに設定されます。コンテンツのサイズに影響を与えるデータが入ってくる場合、ScrollViewのサイズを判別するのが難しい場合があります。これを補う方法はいくつかありますが、ScrollViewのさらに大きな制限は、すべてを一度にレンダリングすることです。 Facebookアカウントがすべてのストーリーを一度にレンダリングすることを想像してみてください-それは決してロードされません！

FlatListはScrollViewに似ていますが、遅延読み込みを使用するため、現在画面に表示されているアイテムのみがレンダリングされます。もちろん、FlatListにはデータを渡す必要があります。具体的には、データの配列を渡す必要があります。次に、FlatListはその配列をループし、画面上でそれぞれをレンダリングします。アイテムが画面から消えた場合、ユーザーがスクロールして離れると、FlatListはそのアイテムをダンプし、次に画面に表示されたときに再作成します（状態は失われます）。一方、ScrollViewは、ダンプとリロードを行いませんが、最初にそれらすべてを一度にレンダリングします。

それぞれの例を次に示します。

<SafeAreaView style={{ flex: 1 }}>
  <ScrollView>// content in here to fill the page</ScrollView>
</SafeAreaView>

<SafeAreaView style={{ flex: 1 }}>
  <FlatList
    data={dataArray}
    renderItem={(
      { item } // item would represent one element in the dataArray
    ) => <IndividualComponent prop={item.prop} />}
    keyExtractor={item => item.id}
  />
</SafeAreView>

これで、FlatListをScrollView内にネストしたり、その逆を行ったりする必要はありません。これは良い習慣ではなく、とにかくエラーが発生します。 FlatListで覚えておくべき重要なことは、renderItemプロップがその関数でこれらのパラメーターを受け取るように修正されていることです：renderItem={({item, index, separators}) => {}}。また、アイテムは常にdataプロップに渡す配列からのものです。これはプレーン配列のみを取り込むことができます。

FlatListに関するその他の重要な点-keyExtractorは、FlatListによってレンダリングされる各コンポーネントにkeyプロップを設定するのと同じように、Reactが各要素に一意のキーを設定する必要性を処理します。また、状態または別の小道具が原因でdataArrayが更新された場合、上記の例で設定されているように、FlatListは再レンダリングされません。更新するために、extraDataプロップを設定して、何が更新されるかを監視できます（例： extraData={this.state}）。

要約

これで、ReactNativeの基本的なコンポーネントは終わりです。あなたが見ることができるように、彼らはあなたが慣れているかもしれないよりはるかに特別です。ここでのコンポーネントの詳細については、公式ドキュメントを確認してください。

getdocs

13036