在调用 createMaterialTopTabNavigator 的键盘上隐藏选项卡栏作为底部选项卡导航器实现

Question

大家好，我使用 React Navigation 5

createMaterialTopTabNavigator

来实现

Bottom Navigation setup

，因为我也需要 Material Top Navigator 提供的滑动过渡，但与

createBottomTabNavigator

不同，

Material Top

没有

keyboardHidesTabBar 

这样我就可以确保键盘打开时隐藏选项卡栏，但这就是我想要实现的目标（https://material.io/components/bottom-navigation#placement）。
还有其他方法可以完成这样的事情吗？

这是当前可以玩的零食：https://snack.expo.io/qTDqLo1eb

这是代码：

import * as React from 'react';
import { Text, View, TextInput } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
import { MaterialCommunityIcons } from '@expo/vector-icons';

function HomeScreen() {
  const [text, onChangeText] = React.useState("Useless Text");
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Home!</Text>
      <TextInput
        onChangeText={onChangeText}
        value={text}
      />
    </View>
  );
}

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

const Tab = createMaterialTopTabNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator tabBarPosition='bottom'
      tabBarOptions={{
        // style: { position: 'absolute', bottom:0 },
        activeTintColor: '#e91e63',
        inactiveTintColor: '#ee11ff',
        showIcon: true,
        indicatorStyle:{
          height:0
        }
      }}>
        <Tab.Screen
        options={{
          tabBarLabel: 'Home',
          tabBarIcon: ({ color, size }) => (
            <MaterialCommunityIcons name="home" color={color} size={24} />
          ),
        }} name="Home" component={HomeScreen} />
        <Tab.Screen
        options={{
          tabBarLabel: 'Profile',
          tabBarIcon: ({ color, size }) => (
            <MaterialCommunityIcons name="account" color={color} size={24} />
          ),
        }} name="Settings" component={SettingsScreen} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

Answer 1

使用

createMaterialTopTabNavigator

在底部选项卡的任何选项卡中隐藏键盘

大家好， 正如我所搜索的： 隐藏使用

createMaterialTopTabNavigator

创建的底部选项卡栏，将位置赋予底部， 这样可以为选项卡之间的切换提供流畅的手势处理

但是如果您想在底部选项卡中的任何选项卡中隐藏键盘怎么办

它不提供隐藏键盘上打开底部选项卡的功能（到目前为止）

我开发了适合所有人的解决方案（无版本限制）

import React, {useState, useEffect} from 'react';
import {Image, StyleSheet, Keyboard} from 'react-native';
import {createMaterialTopTabNavigator} from '@react-navigation/material-top-tabs';

import Images from '../../Assets/Images';
import Fonts from '../../Assets/Fonts';
import colors from '../../Utils/colors';
import DashBoard from '../../Screens/Dashboard';
import Payments from '../../Screens/Payments';
import Claims from '../../Screens/Claims';
import Locations from '../../Screens/Locations';

const BottomTab = createMaterialTopTabNavigator();

const BottomTabs = () => {
  const [keyboardStatus, setKeyboardStatus] = useState(undefined);

  const _keyboardDidShow = () => setKeyboardStatus(true);
  const _keyboardDidHide = () => setKeyboardStatus(false);

  useEffect(() => {
    Keyboard.addListener('keyboardDidShow', _keyboardDidShow);
    Keyboard.addListener('keyboardDidHide', _keyboardDidHide);

    return () => {
      Keyboard.removeListener('keyboardDidShow', _keyboardDidShow);
      Keyboard.removeListener('keyboardDidHide', _keyboardDidHide);
    };
  }, []);

  return (
    // {!keyboardStatus && (<></>)}

    <BottomTab.Navigator
      tabBarPosition="bottom"
      screenOptions={{
        headerShown: false,
        tabBarActiveTintColor: colors.white,
        tabBarInactiveTintColor: '#F8BCBE',
        tabBarLabelStyle: {fontFamily: Fonts.Medium},
        tabBarLabelStyle: {fontSize: 12},
        tabBarStyle: {
          height: keyboardStatus ? 0 : 80,   `== SOLUTION lIES HERE ==`
          backgroundColor: colors.appRed,
        },
      }}
      tabBarOptions={{
        indicatorStyle: {
          backgroundColor: '#F8BCBE',
        },
      }}
      initialRouteName="DashBoard">
      <BottomTab.Screen name="POLICIES" component={DashBoard}/>
      <BottomTab.Screen name="PAYMENTS" component={Payments}/>

为任何更新或查询添加评论...