react-native - 如何在 react-native-tab-view 中设置选定选项卡的样式

Question

我正在使用 react-native-tab-view 并且我想将背景颜色设置为黑色只到选定的选项卡，其他人应该说灰色背景。

Answer 1

您可以使用传递给 renderLabel / renderIcon 道具的道具派生当前选项卡。选项卡视图库实际上会为您制作动画，效果很好。这是一个使用流类型的工作示例：

  _renderLabelFactory = (props: TabScreenSceneRenderPropsType): TabBarCallbackType => (
    ({ route }: TabScreenSceneType): Element<*> => {
      const index = props.navigationState.routes.indexOf(route);
      const inputRange =
        props.navigationState.routes.map((x: TabScreenRouteType, i: number): number => i);
      const outputRange = inputRange.map((inputIndex: number): string =>
        (inputIndex === index ? Colors.lightBlue : Colors.white));
      const color = props.position.interpolate({
        inputRange,
        outputRange
      });
      return <Animated.Text style={[styles.label, { color }]}>{route.title}</Animated.Text>;
    }
  );

  _renderIconFactory = (props: TabScreenSceneRenderPropsType): TabBarCallbackType => (
    ({ route }: TabScreenSceneType): Element<*> => {
      const index = props.navigationState.routes.indexOf(route);
      const inputRange =
        props.navigationState.routes.map((x: TabScreenRouteType, i: number): number => i);
      const outputRange = inputRange.map((inputIndex: number): string =>
        (inputIndex === index ? Colors.lightBlue : Colors.white));
      const color = props.position.interpolate({
        inputRange,
        outputRange
      });
      const AnimatedIcon = Animated.createAnimatedComponent(Icon);
      return <AnimatedIcon name={route.icon} size={30} style={[styles.icon, { color }]} />;
    }
  );

  _renderTabs = (sceneProps: SceneRendererProps<TabScreenRouteType>): Element<*> => {
    return (
      <TabBar
        {...sceneProps}
        renderLabel={this._renderLabelFactory(sceneProps)}
        renderIcon={this._renderIconFactory(sceneProps)}
        style={styles.tabbar}
        tabStyle={styles.tab}
        indicatorStyle={styles.indicator}
        scrollEnabled
      />
    );
  };

  _renderScene = SceneMap({
    '1': (): Element<*> => <DashboardScreen />,
    '2': (): Element<*> => (
      <EMScreen navigation={this.props.navigation} screenProps={this.props.screenProps} />
    ),
    '3': (): Element<*> => <FinanceScreen />,
    '4': (props): Element<*> => (
      <PerformanceScreen navigation={this.props.navigation} />
    ),
    '5': (): Element<*> => <FacilityScreen />,
    '6': (): Element<*> => <HRScreen />
  });

  render(): Element<*> {
    /* $FlowFixMe orientation is a maybe type - we should probably just require it */
    return (
      <TabView
        renderTabBar={this._renderTabs}
        style={styles.container}
        navigationState={this.state}
        renderScene={this._renderScene}
        onIndexChange={this._handleIndexChange}
        swipeEnabled={Platform.OS !== 'web'}
        tabBarPosition="bottom"
      />
    );
  }