React Native で Tinder スタイルのスワイプ コンポーネントを作成する (パート 1/2)
16266 ワード
このチュートリアルでは、ユーザーが他のユーザーのプロファイルを表示し、左または右にスワイプしてそのプロファイルを保存し、別のユーザーのプロファイルを表示できる基本的な React Native アプリを構築する方法について説明します.このチュートリアルでは、スワイプ機能を実現する方法の簡単な概要を説明することに焦点を当て、パート 2 ではアプリにアニメーションを追加して Tinder のような外観を実現する方法について説明します.
expo を使用して、新しい反応ネイティブ アプリを作成することから始めましょう.
react-native-gesture-handler のインストール
そして、App.js 内に必要なものをすべてインポートします.
この例では、プロファイルにダミー データを使用します.
それでは、App.js 内の useState フックを使用してアプリの状態を指定しましょう.
そして、現在のプロファイルをレンダリングしていることを確認してください.
スワイプ機能を追加するには、プロファイル情報を含むビューを PanGestureHandler コンポーネントでラップする必要があります.また、後で構築する handleSwipe メソッドを呼び出すための PanGestureHandler props も提供します.
PanGestureHandler の状態が変化するたびに呼び出される「onHandlerStateChange」プロップに handleSwipe を渡します.これは、ユーザーが画面から指を離したときにのみコードを実行してスワイプするようにできるため、便利です.
handleSwipe メソッドは、いくつかのことを行う必要があります.ユーザーが左または右にスワイプしているかどうかを確認し、それに応じて反応する必要があります.また、画面にレンダリングされる新しいプロファイルをトリガーする必要があります.
nativeEvent は、ジェスチャ ハンドラー関数のプロパティに渡される既定のイベントです.ユーザーがスワイプしている方向を確認するために、nativeEvent の translationX プロパティを使用します.
この関数はうまく機能しますが、ユーザーが画面から指を離したときにのみスワイプが発生するようにはまだ作成していません.そのためには、nativeEvent の状態プロパティを確認する必要があります.
これで、関数は意図したとおりに機能します.
全体として、これはこの種のアプリを作成する 1 つの方法にすぎません.この投稿を最初に書いたとき、スワイプを処理するために PanGestureHandler の onGestureEvent prop を使用していましたが、後で onHandlerStateChange について学び、onHandlerStateChange が必要なものに対してはるかにうまく機能するため、この投稿を書き直しました.何か新しいことを学んだことを願っています.読んでくれてありがとう. :)
expo を使用して、新しい反応ネイティブ アプリを作成することから始めましょう.
expo init SwipingApp
react-native-gesture-handler のインストール
expo install react-native-gesture-handler
そして、App.js 内に必要なものをすべてインポートします.
import React, {useState} from 'react';
import { StyleSheet, Text, View, Image } from 'react-native';
import {PanGestureHandler} from 'react-native-gesture-handler';
この例では、プロファイルにダミー データを使用します.
const profiles = [
{
name:"John Doe",
age:27,
likes:["Hockey","Hiking"],
pic:"https://www.exampleimagelink.png"
},
{
name:"Alexis Texas",
age:22,
likes:["Parties","Bananas"],
pic:"https://www.exampleimagelink2.png"
},
{
name:"Jane Smith",
age:35,
likes:["Netflix","Wine"],
pic:"https://www.exampleimagelink3.png"
}
]
それでは、App.js 内の useState フックを使用してアプリの状態を指定しましょう.
const [profile,setProfile] = useState(profiles[0])
そして、現在のプロファイルをレンダリングしていることを確認してください.
return (
<View style={styles.container}>
<View>
<Image source={profile.pic}></Image>
<Text>{profile.name}</Text>
<Text>Age: {profile.age}</Text>
<Text>Likes: {profile.likes.join(', ')}</Text>
</View>
</View>
);
}
スワイプ機能を追加するには、プロファイル情報を含むビューを PanGestureHandler コンポーネントでラップする必要があります.また、後で構築する handleSwipe メソッドを呼び出すための PanGestureHandler props も提供します.
return (
<View style={styles.container}>
<PanGestureHandler onHandlerStateChange={handleSwipe} >
<View style={{backgroundColor:"yellow", width:"75%", height:"75%"}}>
<Image source={profile.pic}></Image>
<Text>{profile.name}</Text>
<Text>Age: {profile.age}</Text>
<Text>Likes: {profile.likes.join(', ')}</Text>
</View>
</PanGestureHandler>
<StatusBar style="auto" />
</View>
);
}
PanGestureHandler の状態が変化するたびに呼び出される「onHandlerStateChange」プロップに handleSwipe を渡します.これは、ユーザーが画面から指を離したときにのみコードを実行してスワイプするようにできるため、便利です.
handleSwipe メソッドは、いくつかのことを行う必要があります.ユーザーが左または右にスワイプしているかどうかを確認し、それに応じて反応する必要があります.また、画面にレンダリングされる新しいプロファイルをトリガーする必要があります.
const handleSwipe=({nativeEvent}) =>{
//swiping right
if(nativeEvent.translationX < -225){
console.log("Swiped Right")
//Here we would add the code to save the user profile into our match list. For simplicity, I won't be doing this in this example.
index++
setProfile(profiles[index%3])
}
//swiping left
else if(nativeEvent.translationX > 225){
console.log("Swiped Left")
index++
setProfile(profiles[index%3])
}
}
nativeEvent は、ジェスチャ ハンドラー関数のプロパティに渡される既定のイベントです.ユーザーがスワイプしている方向を確認するために、nativeEvent の translationX プロパティを使用します.
この関数はうまく機能しますが、ユーザーが画面から指を離したときにのみスワイプが発生するようにはまだ作成していません.そのためには、nativeEvent の状態プロパティを確認する必要があります.
const handleSwipe=({nativeEvent}) =>{
const {state} = nativeEvent
//state will equal 5 when the gesture is completed. I.E when a user takes his finger off the screen.
if(state === 5){
//handle swipe right
if(nativeEvent.translationX < -225){
console.log("Swiped Right")
//save this user profile to our match list. For simplicity sake I won't be really doing this in this example.
index++ //index is declared outside of App()
setProfile(profiles[index%3])
}
//handle swipe left
else if(nativeEvent.translationX > 225){
console.log("Swiped Left")
index++
setProfile(profiles[index%3])
}
}
}
これで、関数は意図したとおりに機能します.
全体として、これはこの種のアプリを作成する 1 つの方法にすぎません.この投稿を最初に書いたとき、スワイプを処理するために PanGestureHandler の onGestureEvent prop を使用していましたが、後で onHandlerStateChange について学び、onHandlerStateChange が必要なものに対してはるかにうまく機能するため、この投稿を書き直しました.何か新しいことを学んだことを願っています.読んでくれてありがとう. :)
Reference
この問題について(React Native で Tinder スタイルのスワイプ コンポーネントを作成する (パート 1/2)), 我々は、より多くの情報をここで見つけました https://dev.to/nrymarz/creating-a-tinder-style-swiping-component-with-react-native-part-1-2-h45テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol