React Native は同様のスクロール選択効果を実現します

Yuxian: CSDN コンテンツパートナー、CSDN の新星メンター、51CTO (トップセレブ + エキスパートブロガー)、Github オープンソース愛好家 (ゴーゼロソースコードの二次開発、ゲームバックエンドアーキテクチャ https://github.com/Peakchen)

React Native で同様のスクロール選択効果を実現するには、サードパーティのライブラリまたはカスタムコンポーネントを使用して実現できます。基本的な説明と例は次のとおりです。

原理の詳細な説明:

まず、オプションのリストを表示するには、スクロール可能なコンテナコンポーネントが必要です。React Native では、ScrollView や FlatList などのコンポーネントを使用してこれを実現できます。
次に、スクロール位置を制御するスクロールバーコンポーネントが必要です。スクロールバーは、スライダーやピッカーなどのコンポーネント、またはカスタムコンポーネントを使用して実装できます。
スクロールバーとスクロールコンテナ間の関連付けを確立します。スクロールバーの値が変更されると、スクロールバーイベントをリッスンし、対応する値をスクロールコンテナーに渡して、スクロール選択効果を実現できます。
選択された値はスクロール位置に基づいて計算されます。スクロールコンテナーの位置とレイアウトに基づいて、現在のスクロール位置に対応する選択された値を計算し、処理のためにアプリケーションに返すことができます。

使用シナリオの説明:
スクロール選択効果はモバイルアプリケーションで広く使用されており、使用シナリオの例をいくつか示します。

時間ピッカー: 日付選択または予約システムでは、スクロール選択効果を使用して、ユーザーが日付と時刻を簡単に選択できるようにすることができます。
セレクター/ドロップダウンメニュー: フォームでは、スクロール選択効果を使用して、国、都市、通貨などの選択などのオプションを表示および選択できます。
値セレクター: ボリュームの調整、タイマーの設定など、値の正確な選択が必要な一部のアプリケーションでは、スクロール選択効果を使用して正確な値を選択できます。
画像スクロールセレクター: フォトギャラリーまたはフォトアルバムアプリで、スクロール選択効果を使用して多数の画像を表示し、ユーザーがスクロールして特定の画像を選択できるようにすることができます。

react-native-picker-select同様のスクロール選択効果を実現するには、このサードパーティコンポーネントを使用できます。このコンポーネントは、複数選択、単一選択、数値選択などの機能をサポートしており、スタイルをカスタマイズすることもできます。

このコンポーネントは、次のコマンドを使用してインストールできます。

npm install react-native-picker-select --save

次に、使用するページにコンポーネントを導入し、ニーズに応じて構成する必要があります。たとえば、単一選択をサポートするスクロールピッカーを作成する場合は、次のように構成できます。

import React, { useState } from 'react';
import RNPickerSelect from 'react-native-picker-select';

const options = [
  { label: 'Option 1', value: 'option1' },
  { label: 'Option 2', value: 'option2' },
  { label: 'Option 3', value: 'option3' }
];

const App = () => {
  const [selectedOption, setSelectedOption] = useState('');

  return (
    <RNPickerSelect
      onValueChange={(value) => setSelectedOption(value)}
      items={options}
      placeholder={
   
   { label: 'Select an option', value: '' }}
      value={selectedOption}
    />
  );
};

export default App;

上記のコードでは、まず、options選択可能なオプションを保存する配列を定義します。次に、コンポーネントを作成しApp、コンポーネント内の状態を初期化してselectedOption、現在選択されているオプションを保存しました。最後に、RNPickerSelectコンポーネントをページ上にレンダリングし、itemsプロパティを配列options、placeholderプロパティをデフォルトのプレースホルダー、valueプロパティを現在選択されているオプションに設定します。

ユーザーがオプションを選択すると、onValueChangeコールバック関数がトリガーされ、このコールバック関数のステータスを更新してselectedOptionオプションを変更できます。

文献資料へのリンク:
以下は、React Native でのスクロール選択効果の実装に関する文献資料へのリンクです。これは、実装の原則と使用方法をより深く理解するのに役立ちます。

React Native 公式ドキュメント: React Native 公式ドキュメントには、スクロールコンテナコンポーネント (ScrollView、FlatList など) およびスクロールバーコンポーネント (Slider、Picker など) に関する詳細な情報と例が記載されています。リンク ↗ リンク ↗ リンク ↗
React Native コミュニティ: React Native コミュニティは、スクロール選択効果を実装するライブラリを含む、多くのサードパーティライブラリとコンポーネントを提供します。ここでは、いくつかの人気のあるライブラリと例を見つけることができます。リンク↗

現在このテクノロジーを使用している製品:
現在、スクロール選択効果を実現するために React Native を使用している多くの製品があります。いくつかの例を次に示します。

Instagram: Instagram は、React Native を使用して日付ピッカーやフィルターなどのスクロール効果を実装する人気のソーシャルメディアアプリです。
Airbnb: Airbnb はオンラインレンタルプラットフォームであり、そのモバイルアプリケーションは React Native を使用して、日付ピッカーやフィルターなどのスクロール選択効果を実装しています。
Discord: Discord は人気のあるチャットおよび音声通話アプリで、React Native を使用してチャンネル選択やメッセージフィルターなどのスクロール効果を実装しています。

React Native は同様のスクロール選択効果を実現します

おすすめ