React导航5 tabBarVisible未完全隐藏

Question

我在tabBarIcon中添加了一个按钮，在使用tabBarVisible时它并不是完全隐藏的，我的代码是：

文件: App.js

我只是在AddScreen中添加了一个不同的图标。

import HomeStack from './stacks/Home';
import UserStack from './stacks/User';
import AddStack from './stacks/Add';

import AddIcon from './AddIcon';

const Tab = createBottomTabNavigator();
export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen
          name="Home"
          component={HomeStack}
          options={{
            tabBarIcon: () => <IconAnt name={'home'} style={styles.icon} />,
          }}
        />
        <Tab.Screen
          name="Add"
          component={AddStack}
          options={{
            tabBarIcon: () => <AddIcon />, // icon add
            title: '',
          }}
        />
        <Tab.Screen
          name="User"
          component={UserStack}
          options={{
            tabBarIcon: () => <IconAnt name={'user'} style={styles.icon} />,
          }}
        />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

文件: stacks/Home.js

当按下'go to detail‘时，我隐藏了标签栏

function HomeScreen({navigation}) {
  return (
    <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
      <Text>Home!</Text>
      <TouchableOpacity onPress={() => navigation.navigate('Detail')}>
        <Text>go to detail/Text>
      </TouchableOpacity>
    </View>
  );
}

function DetailScreen() {
  return (
    <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
      <Text>Detail!</Text>
    </View>
  );
}

const HomeStack = createStackNavigator();
export default function ({navigation, route}) {
  var tabBarVisible = true;
  if (typeof route.state !== 'undefined') {
    const {routes} = route.state;
    if (routes.length > 1) {
      tabBarVisible = false;
    }
  }
  navigation.setOptions({tabBarVisible});
  // tabbar will hide when moving to Detail screen
  return (
    <HomeStack.Navigator>
      <HomeStack.Screen name={'Home'} component={HomeScreen} />
      <HomeStack.Screen name={'Detail'} component={DetailScreen} />
    </HomeStack.Navigator>
  );
}

AddIcon.js

AddScreen的文件图标

export default function () {
  return (
    <View style={styles.container}>
      <View style={styles.button}>
        <IconAnt name={'plus'} style={{fontSize: 30, color: '#fff'}} />
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    position: 'absolute',
    alignItems: 'center',
    zIndex: 99,
  },
  button: {
    alignItems: 'center',
    justifyContent: 'center',
    width: 72,
    height: 72,
    borderRadius: 72 / 2,
    backgroundColor: 'red',
    position: 'absolute',
    marginTop: -45,
    shadowColor: 'red',
    shadowRadius: 5,
    shadowOffset: {height: 10},
    shadowOpacity: 0.3,
    borderWidth: 2,
    borderColor: '#FFFFFF',
    zIndex: 99,
  },
});

屏幕截图：Home screen Detail screen

我怎么把它完全隐藏起来？谢谢!

Answer 1

实际上你的标签栏是隐藏的，但当你把它放在上面的标签上时，这就是为什么你在制作tabBarVisible = false后仍然可以看到它，你还必须在制作tabBarVisible = false时手动隐藏它，检查路线并动态应用样式。

将style对象传递给tabBarOptions

tabBarOptions: {
   style: {
      opacity: 0 
   }
}

或者这也可能行得通

tabBarOptions: {
   style: {
      top: 50 
   }
}

编辑:通过查看您的代码，我必须更改导航器的一些结构，现在它在零食中工作，您在选项卡中呈现堆栈，但它应该是堆栈中的选项卡。

Link to snack

Answer 2

当我使用自定义图像时，我也遇到了同样的问题。

这是我的解决方案。

你必须找到你想要隐藏的标签的索引。然后，您可以通过检查索引来处理选项卡栏的不透明度。

tabBarOptions={{
     style: {...styles.navigator, opacity: routeIndex === 2 ? 0 : 1},
   }}

const HomeTab = createBottomTabNavigator();
export const HomeTabScreens = ({route}) => {
 const routeIndex = route.state.index; // 2 is the screen that I want to hide.
...
}

Answer 3

您可以在tabBarIcon中添加聚焦道具，并相应地应用样式：

tabBarIcon: ({focused) => { 
     <Image
            source={InstaCircleIcon}
            style={[
              {width: 87, height: 87},
              focused && {width: 0, height: 87},
            ]}
          />
}

完整示例

<Tab.Screen
    name="Addpost"
    component={Addpost}
    options={{
      tabBarLabel: '',
      tabBarIcon: ({focused}) => (
        <TouchableOpacity style={[{top: -30, borderRadius: 50}]}>
          <Image
            source={InstaCircleIcon}
            style={[
              {width: 87, height: 87},
              focused && {width: 0, height: 87},
            ]}
          />
        </TouchableOpacity>
      ),

      tabBarVisible: false,
    }}
  />