由于涉及數(shù)據(jù)隱私，對相關(guān)代碼做屏蔽處理，僅限個人學(xué)習(xí)使用。

一、自定義Segement組件

// styles設(shè)置

  selectContainer: {
    marginTop: 6,
    flexDirection: "row",
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#5685E4",
    width: 72,
    height: 32,
    borderColor: "#5685E4",
    borderWidth: 1
  },
  unSelectContainer: {
    marginTop: 6,
    flexDirection: "row",
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#FFFFFF",
    width: 72,
    height: 32,
    borderColor: "#5685E4",
    borderWidth: 1
  },
  selectTitle: {
    color: "#FFFFFF",
    fontSize: font(12)
  },
  unSelectTitle: {
    color: "#5685E4",
    fontSize: font(12)
  }

render和點擊事件

  constructor(props) {
    super(props);
    this.state = {
      isOutTab: true
    };
  }

  onOutTab = () => {
    this.setState({
      isOutTab: true
    });
  };

  onInTab = () => {
    this.setState({
      isOutTab: false
    });
  };

  renderSwitch = () => {
    const { isOutTab } = this.state;
    return (
      <View style={styles.container}>
        <TouchableOpacity onPress={this.onOutTab}>
          <View
            style={isOutTab ? styles.selectContainer : styles.unSelectContainer}
          >
            <Text style={isOutTab ? styles.selectTitle : styles.unSelectTitle}>
              ATab
            </Text>
          </View>
        </TouchableOpacity>
        <TouchableOpacity onPress={this.onInTab}>
          <View
            style={isOutTab ? styles.unSelectContainer : styles.selectContainer}
          >
            <Text style={isOutTab ? styles.unSelectTitle : styles.selectTitle}>
              BTab
            </Text>
          </View>
        </TouchableOpacity>
      </View>
    );
  };

二、Tab分頁使用react-native-swiper第三方組件

import Swiper from "react-native-swiper";

  renderTabs = () => {
    const { isOutTab } = this.state;
    return (
      <Swiper
        style={{ width: screenW * 2, height: isOutTab ? 1200 : 440 }}
        showsButtons={false}
        loop={false}
        bounces
        horizontal
        showsPagination={false}
        index={isOutTab ? 0 : 1}
        scrollEventThrottle={0}
        onIndexChanged={index => {
          if (index === 1) {
            this.onInTab();
          } else {
            this.onOutTab();
          }
        }}
      >
        <View>
          <VoucherList
            data={realtimeData}
            voucherMarkTitle="標題A"
            voucherMarkSubTitle="副標題A"
          />
          <VoucherList
            data={biddingData}
            voucherMarkTitle="標題B"
            voucherMarkSubTitle="副標題B"
          />
          <VoucherList
            data={externalData}
            voucherMarkTitle="標題C"
            voucherMarkSubTitle="副標題C"
          />
        </View>
        <FinancialInList data={data} />
      </Swiper>
    );
  };

  render() {
    return (
      <View>
        <View style={styles.separator} />
        {this.renderSwitch()}
        {this.renderTabs()}
      </View>
    );
  }