时间戳

首页 > 解决方案 > 设置底部标签栏的高度问题！仅适用于硬值，不适用于参数

javascript - 设置底部标签栏的高度问题！仅适用于硬值，不适用于参数

问题描述

我正在尝试在底部标签栏中设置高度（使用反应导航）。我在 gloabls.js 文件中设置了全局变量，这些变量可以完美地工作并且可以很好地设置在我的 App.js 文件中。例如

    global.App_paddingLeft = 3,
    global.App_BottomTabBarHeight = '8%',

在我的 App.js 中，我这样做：

//Tabs across the bottom of the screen
const MainScreenTabNavigator = createBottomTabNavigator(
  {
    HomeStack,
    
    OtherStack,

  },
  {

    tabBarOptions: {

      activeTintColor: 'orange',
      inactiveTintColor: 'black', //white 
      style: {
        backgroundColor: '#ff8278',
        height: global.App_BottomTabBarHeight   //'8%'
      },
      indicatorStyle: {
        backgroundColor: 'black'
      },
      showLabel: false
    },
    
  }
  
);

高度不会用变量设置global.App_BottomTabBarHeight = '8%'。这global.App_BottomTabBarHeight肯定会将“8%”传递给 App.js 文件，因为我已经控制台记录了它。

我也试过这样做： height: Dimensions.get('window').height * global.App_BottomTabBarHeight， where global.App_BottomTabBarHeight = 0.08，但仍然没有

为什么我不能将高度设置为 '8%' ？

如果我手动输入height: '8%'它工作正常。奇怪的

标签： javascriptreactjsreact-native

解决方案

global object我相信如果你想拥有一些“全球造型||主题”，远离它会更安全......

我建议您创建一个theme > style.js文件并将所有这些样式存储在其中

 export const App_paddingLeft = 3;

然后你可以在你的底部标签样式中引用这些，它会工作得很好......

推荐阅读