Help us understand the problem. What is going on with this article?

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開発で同じ悩みを持っている人の参考になればと!

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away