Как стилизовать выбранную вкладку в реагировать на родную вкладку

Question

Я использую response-native-tab-view и хочу установить черный цвет фона только для выбранной вкладки, другие должны иметь, скажем, серый фон.

Answer 1

Вы можете получить текущую вкладку, используя реквизиты, переданные реквизитам renderLabel / renderIcon. Библиотека представлений вкладок фактически оживит это для вас, она работает довольно хорошо. Вот рабочий пример с flowtyping:

  _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"
      />
    );
  }