react-native 类似tab的两个页面Segmented

勤做笔记，方便自己，帮助他人。

代码地址：https://github.com/libinWeny/RNLibin

1.gif

核心代码如下：
1.头部的一个切换按钮。这里我用的是蚂蚁金服的SegmentedControl组件，这个自己画也很简单。

<SegmentedControl
     tintColor={CS.THEME11}
      style={styles.headerCenter}
      values={[ '房产圈', '互动' ]}
      selectedIndex={this.state.select}
      onChange={(e) => this.refs.ScrollView.scrollTo({
          x : W * e.nativeEvent.selectedSegmentIndex,
          animated : true
      })}
 />

2.两个页面。pagingEnabled这个属性控制吗每次滑动为屏幕一屏宽度。
onMomentumScrollEnd滚动动画结束时调用此函数可以获取到当前的x值

<ScrollView
  ref={'ScrollView'}
  horizontal
   showsHorizontalScrollIndicator={false}
   pagingEnabled
   onMomentumScrollEnd={(e) => this.changeSelectTitle(e)}
>
   <Group navigation={this.props.navigation}/>
   <Interact navigation={this.props.navigation}/>
</ScrollView>

3.滑动的时候，跟着修改选中的头部

changeSelectTitle(e) {
     let setX = e.nativeEvent.contentOffset.x;
     if (setX) {
         this.setState({ select : 1 })
     } else {
         this.setState({ select : 0 })
     }
    }

react-native 类似tab的两个页面Segmented

推荐阅读更多精彩内容