react-native-tab-view 如何设置tab选项卡的默认颜色

507 阅读1分钟

自定义TabBar,然后在TabView中使用它

<TabView
  navigationState={{ index, routes }}
  renderScene={ renderScene }
  onIndexChange={ setIndex }
  initialLayout={ initialLayout }
  renderTabBar={ renderTabBar }  // <-- 添加这一行
/>
const renderTabBar = props => {
    return (
      <TabBar
        {...props}
        renderLabel={ ({route, focused, color}) => {
          return (
            <Text style={{ fontWeight: focused ? 'bold' : 'normal', color }}>
              {route.title}
            </Text>
          );
        }}
        style={styles.tabBar}
        activeColor={'orange'}
        inactiveColor={'grey'}
        indicatorStyle={{
          backgroundColor: 'red',
          height: 2,
          marginBottom: 6,
          width: 0.2,
        }}
        tabStyle={{width: 'auto', minWidth: props.itemWidth}}
      />
    );
};