如何更改 react-native-tab-view 的颜色？答案

【问题标题】：How to change to color of react-native-tab-view?如何更改 react-native-tab-view 的颜色？
【发布时间】：2020-10-26 10:52:44
【问题描述】：

我是 react-native 和学习它的新手。在学习 react-native-tab-view 时，我尝试更改它的颜色，但经过几次尝试我无法做到。如果有人指导我如何更改默认为蓝色的标签栏颜色，我将不胜感激。 Here is the link to npm react-native-tab-view 这是一段代码。任何帮助将不胜感激。

import * as React from 'react';
import { View, StyleSheet, Dimensions } from 'react-native';
import { TabView, SceneMap } from 'react-native-tab-view';
 
const FirstRoute = () => (
  <View style={[styles.scene, { backgroundColor: '#ff4081' }]} />
);
 
const SecondRoute = () => (
  <View style={[styles.scene, { backgroundColor: '#673ab7' }]} />
);
 
const initialLayout = { width: Dimensions.get('window').width };
 
export default function TabViewExample() {
  const [index, setIndex] = React.useState(0);
  const [routes] = React.useState([
    { key: 'first', title: 'First' },
    { key: 'second', title: 'Second' },
  ]);
 
  const renderScene = SceneMap({
    first: FirstRoute,
    second: SecondRoute,
  });
 
  return (
    <TabView
      navigationState={{ index, routes }}
      renderScene={renderScene}
      onIndexChange={setIndex}
      initialLayout={initialLayout}
    />
  );
}
 
const styles = StyleSheet.create({
  scene: {
    flex: 1,
  },
});

【问题讨论】：

标签： react-native react-native-tab-view

【解决方案1】：

更改标签栏的背景颜色

如果您引用此section，则必须在使用renderTabBar 属性声明自定义 React 组件后传递标签栏的样式属性。

<TabView
  navigationState={{ index, routes }}
  renderScene={renderScene}
  onIndexChange={setIndex}
  initialLayout={initialLayout}
  renderTabBar={props => <TabBar {...props} style={{backgroundColor: 'black'}}/>} // <-- add this line
/>

更改标签栏的文本颜色

如果你提到这个，

<TabBar
  renderLabel={({route, color}) => (
    <Text style={{ color: 'black', margin: 8 }}>
      {route.title}
    </Text>
  )}
  style={{backgroundColor: 'white'}}
  ...
/>

请随意使用example snack 进行进一步实验。 :)

【讨论】：

如果我也想更改文本颜色怎么办？即我想将 FIRST、SECOND 和 THIRD 更改为黑色。如何做到这一点？
@DilawerHussain 你必须使用renderLabel 属性来添加Text 组件。以我更新的答案为例。

【解决方案2】：

这是我的实现方式

自定义 TabBar 然后在 TabView 中使用它，如下代码所示

首先让我们先初始化状态

   const [index, setIndex] = useState(0);
   const [routes] = useState([
     { key: 'first', title: 'Main Tab' },
     { key: 'second', title: 'Second Tab' }]);

   const renderScene = SceneMap({
     first: FeaturedStore,
     second: AllStore });

要更改标签/标题的样式，这可能会对您有所帮助。这里我使用了我的自定义 TextView 你可以使用你自己的

 const renderTabBar = props => {
    return (
      <TabBar
        {...props}
        renderLabel={({ focused, route }) => {
          return (
            <TextView
              size={20}
              category="Medium"
              color={focused ? 'BLACK' : 'GRAY3'}>
              {route.title}
            </TextView>
          );
        }}
        indicatorStyle={styles.indicatorStyle}
        style={styles.tabBar}
      />
    );
  };

这是 TabView 的示例代码

 <View style={styles.container}>
    <View style={styles.divider} />
    <TabView
      renderTabBar={renderTabBar}
      navigationState={{ index, routes }}
      renderScene={renderScene}
      onIndexChange={setIndex}
      initialLayout={{ width: SCREEN_WIDTH }}
      showPageIndicator={true}
    />
  </View>

让我们锦上添花的是，让这个 TabView 看起来像这样的样式

 const styles = StyleSheet.create({
  container: { width: '100%', height: '100%', backgroundColor: COLORS.WHITE },
  tabBar: {
    backgroundColor: '#ffffff',
    borderBottomWidth: 1,
    borderColor: COLORS.BLACK,
  },
  indicatorStyle: {
    backgroundColor: COLORS.PRIMARY,
    padding: 1.5,
    marginBottom: -2,
  },
  divider: {
    zIndex: 100,
    position: 'absolute',
    width: 1,
    height: 48,
    backgroundColor: 'black',
    alignSelf: 'center',
  },
});

更多信息，您可以访问官方docs

【讨论】：

【解决方案3】：

您需要创建一个自定义react-native-tab-view-custom-tabbar

更多详情在这里react-native-tab-view#readme

【讨论】：