やりたいこと

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について

ざっくりとした開発フロー

DotsをCSSで作成
CSSでdot_activeを作る
Dotsのリスト(配列)を作る(ページの数だけ)
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開発で同じ悩みを持っている人の参考になればと！