React Nativeのviewpagerで現在のpageの位置を取得する(Androidのみ動作確認済み)
やりたいこと
ReactNativeのviewpagerで現在のpageの位置(何番目のpageか)を把握。
https://github.com/react-native-community/react-native-viewpager
なぜやりたいかというと、viewpagerがdots(現在の位置が一目でわかる下部にある点)をAndroidではデフォルトでサポートしていなかったので自作しようとしたからです。
実装まで
ドキュメントを読んだところ
onPageSelected
というPropが使えそうと思ったので試しました。
ただ、トップページには使用例がないので、サンプルを確認
https://github.com/react-native-community/react-native-viewpager/blob/master/example/ViewPagerExample.js
大抵ReactNativeのライブラリにはexampleのファイルがあります。
実装
簡素化しています。
import ViewPager from '@react-native-community/viewpager';
onPageSelected = (e: PageSelectedEvent) => {
this.setState({page_position: e.nativeEvent.position});
};
render(){
return(
<ViewPager style={style} initialPage={0} onPageSelected=
{this.onPageSelected.bind(this)}>
</ViewPager>
);
}
これでstateのpage_positionに現在のpage_idが代入されます。
Dotsについて
ざっくりとした開発フロー
1. DotsをCSSで作成
2. CSSでdot_activeを作る
3. Dotsのリスト(配列)を作る(ページの数だけ)
4. stateが変更された時、3の配列のpositionのdotsをアクティブにする
DotsのCSS例(カラー部分は自由に)
dot: {
width: 8,
height: 8,
borderRadius: 8/2,
backgroundColor: "#CCC",
marginLeft: 5,
},
dot_active: {
width: 8,
height: 8,
borderRadius: 8/2,
backgroundColor: "#F00",
marginLeft: 5,
},
配列を作る部分は省略
stateのpage_positionのみactiveにする
renderDots(dots){
active_key = this.state.page_position;
dot_active = <View style={dot_active} key={active_key}></View>
dots[active_key] = dot_active;
return(dots);
}
もしReactNativeのAndroid開発で同じ悩みを持っている人の参考になればと！
Author And Source
この問題について(React Nativeのviewpagerで現在のpageの位置を取得する(Androidのみ動作確認済み)), 我々は、より多くの情報をここで見つけました https://qiita.com/nigohiroki/items/c22c50a2f5e9d4634aa3著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .