Album渲染tabBar的时候样式没有渲染出来

Question

Tab.tsx

renderTabBar = (props: SceneRendererProps & {navigationState: IState}) => {
    return (
      <TabBar
        {...props}
        scrollEnabled
        style={styles.tabbar}
        tabStyle={styles.tabStyle}
        indicatorStyle={styles.indicator}
        labelStyle={styles.label}
      />
    );
  };

const styles = StyleSheet.create({
  tabStyle: {
    width: 80,
  },
  label: {
    color: '#333',
  },
  tabbar: {
    backgroundColor: '#fff',
    ...Platform.select({
      android: {
        elevation: 0,
        borderBottomColor: '#e3e3e3',
        borderBottomWidth: StyleSheet.hairlineWidth,
      },
    }),
  },
  indicator: {
    backgroundColor: '#eb6d48',
    borderLeftWidth: 20,
    borderRightWidth: 20,
    borderColor: '#fff',
  },
});

我检查了代码跟视频里一样但是样式没有渲染出来。

注释掉tabBar背景色

const styles = StyleSheet.create({
  tabbar: {
    // backgroundColor: '#fff',
    ...Platform.select({
      android: {
        elevation: 0,
        borderBottomColor: '#e3e3e3',
        borderBottomWidth: StyleSheet.hairlineWidth,
      },
    }),
  },
});

tabbar的background导致label无法显示. 同时indicatorStyle的样式也不知道怎么滴没渲染出来

找了好久也没发现问题出现在哪里, 老师帮忙给看看.

Answer 1

今朝 2021-09-01 15:15:14

这是我用的的版本，你的小版本是多少呢

• 提问者 mid_one #1

  我是按照官方文档装的
  "@react-navigation/bottom-tabs": "^5.x",
      "@react-navigation/material-top-tabs": "^5.3.19",
      "@react-navigation/native": "^5.x",
      "@react-navigation/stack": "^5.x",
  "react-native-tab-view": "^2.16.0",

Answer 2

今朝 2021-09-01 14:48:13

你的react-navigation版本应该和我的不一样

可以看看你的版本对应的文档

• 提问者 mid_one #1

  我也用的5.x.
  "@react-navigation/native": "^5.x",
      "@react-navigation/stack": "^5.x",
  
  这个TabBar是从react-native-tab-view中导入的我看了一下react-native-tab-view api没发生变化