请教如何用react-native-scrollable-tab-view实现下图的效果呀

Question

tab选项卡 选中的时候背景为白色，字体为蓝色，未选中的恰好相反

Answer 1

已实现，我用的自定义组件，写下实现方法。

import ScrollableTabView from "react-native-scrollable-tab-view";

//只写关键的地方
       <ScrollableTabView
       
           //Awesome为自定义的组件
            renderTabBar={() => (<AwesomeTab />)}
            onChangeTab={obj => this._onChangeTab(obj)}
            ref={Scroll => {
              this.ScrollTab = Scroll;
            }}
          >
            <View tabLabel="前30名">
              <Top30  lastAttr={this.props.lastAttr} />
            </View>
            <View tabLabel="后30名">
              <Last30 lastAttr={this.props.lastAttr} />
            </View>
       </ScrollableTabView>

下面是AwesomeTab组件的实现

const Button = (props) => {
  return (
    <TouchableOpacity {...props} activeOpacity={0.95}>
      {props.children}
    </TouchableOpacity>
  )
};
export default class AwesomeTab extends Component {

  constructor(props) {
    super(props);
    this.state = {
    };
  }
  renderTab(name, page, isTabActive, onPressHandler) {
    const textColor = isTabActive ? '#0086E5' : '#fff';
    const backgroundColor = isTabActive ? '#fff' : CommonColor.color_primary;
    console.log(textColor)
    return <Button
      style={[styles.button, { backgroundColor }]}
      key={name}
      accessible={true}
      accessibilityLabel={name}
      accessibilityTraits='button'
      onPress={() => onPressHandler(page)}
    >
      <View style={[styles.tab]}>
        <Text style={{ color: textColor,fontSize:18 }}>
          {name}
        </Text>
      </View>
    </Button>;
  }

  render() {
    return (
      <View style={styles.tabBarBox}>
        <View style={{ flexDirection: 'row' }}>
          {this.props.tabs.map((name, page) => {
            const isTabActive = this.props.activeTab === page;
            const renderTab = this.props.renderTab || this.renderTab;
            return renderTab(name, page, isTabActive, this.props.goToPage);
          })}
        </View>
      </View>
    );
  }

}