打开键盘时反应原生底部标签栏向上推

Question

我们正在使用 createBottomTabNavigator。 在其中一个选项卡的顶部包含搜索栏。 单击该搜索栏时，我们正在打开键盘。 但键盘也将底部标签栏向上推。 打开键盘时，我们需要底部标签栏保持在底部。

1. 我尝试过的解决方案之一是，在 android 清单中，我更改了 android:windowSoftInputMode="adjustPan" 或 "adjustNothing"。 它按预期工作正常。 但是我们在另一个需要“adjustResize”的选项卡中使用聊天布局。 所以我必须为windowSoftInputMode保留“adjustResize”。
2. 作为另一种解决方案，我尝试在组件本身内部更改 windowSoftInputMode。 所以我试过这个 - https://www.npmjs.com/package/react-native-android-keyboard-adjust 。 但是没有用。
3. 作为另一个，我尝试创建一个 TabBarComponent，就像这里提到的https://github.com/react-navigation/react-navigation/issues/618一样。 但没有按预期工作。

const SignedIn = createBottomTabNavigator(
  {
    Followers: {
      screen: FollowerStack,
      ...
    },
    Search: {
      screen: SearchStack,
    },
    Home: {
      screen: HomeStack,
    },
    Bookmarks: {
      screen: BookmarkStack,
    },
    Profile: {
      screen: ProfileStack,
    }
  },
  {
    initialRouteName: "Home",
    tabBarPosition: 'bottom',
    swipeEnabled: false,
    animationEnabled: false,
    tabBarOptions: {
      keyboardHidesTabBar: true,
      showIcon: true,
      showLabel: false,
      activeTintColor: "red",
      inactiveTintColor: "gray",
      adaptive: true,
      safeAreaInset: {
        bottom: "always"
      },
      style: {
        position: 'relative',
        backgroundColor: "#F9F8FB",
        height: TAB_NAVIGATOR_DYNAMIC_HEIGHT,
        paddingTop: DeviceInfo.hasNotch() ? "5%" : "0%",
        minHeight: TAB_NAVIGATOR_DYNAMIC_HEIGHT,
        width: '100%',
        bottom: 0
      }
    }
  }
);

1. 是否存在任何其他属性可以使底部标签栏在底部保持粘性？ 或者
2. 是否可以从组件内部更改 android 清单 windowSoftInputMode？ 如果您需要任何其他代码部分以供参考，请在下面发表评论。 谢谢你的帮助。

Answer 1

我用的是 React navigation 5，这是你想要的吗？

<SignedIn.Navigator 
   tabBarOptions={{
      keyboardHidesTabBar: true
   }}         
}>
</SignedIn.Navigator>

要在此处阅读的文档。

Answer 2

只需转到AndroidManifest.xml文件并更改/添加内部activity标签：

android:windowSoftInputMode="adjustPan"

Answer 3

我得到了这个问题的解决方案。 以前，我在配置“react-native-android-keyboard-adjust”时犯了一个小错误。 现在它工作正常。 因此，我们可以使用此库更改特定组件的“windowSoftInputMode” - https://www.npmjs.com/package/react-native-android-keyboard-adjust

Answer 4

我遇到了完全相同的问题。 以下是我成功解决它的两种方法。

1. 将"softwareKeyboardLayoutMode":"pan"到 app.json 中，如下所示

"android": {
      "adaptiveIcon": {
        "foregroundImage": "./assets/adaptive-icon.png",
        "backgroundColor": "#FFFFFF"
      },
      "softwareKeyboardLayoutMode":"pan"
    }

通过这样做，底部导航器隐藏在键盘后面。 然而，包含TextInputs的ScrollView并没有按照我想要的方式工作。 整个应用程序屏幕都被键盘的高度转换了，隐藏了我的ScrollView一半和它上面的所有东西（标题和东西）。

2. 我使用的第二种解决方法是使用useKeyboard hook 。 第 1 步：删除"softwareKeyboardLayoutMode" ，使其默认为height （这会导致CustomBottomTabNav上升到键盘上方，因为整个屏幕被挤压在剩余高度中）第 2 步：当键盘处于活动状态时动态重置CustomBottomTabNav的位置。

在包含TextInputs的屏幕中

<ScrollView style={{ height: keyboard.keyboardShown? 510 - keyboard.keyboardHeight: 510}}>
/* lots of text inputs*/
</ScrollView>

在CustomBottomTabNav

tabBarOptions={{
    ...otherStuff,
    style={{ bottom: keyboard.keyboardShown? -100: -10, ...otherStuff}}
}}

第二种方法的工作更可靠。 我尝试过keyboardAvoidingView但无法理解其不可预测的行为。

Answer 5

找到它，只需将您的底部导航添加到一个视图中，以制作屏幕尺寸的视图，这样：

import React from 'react'
import { StyleSheet, Text, View, Dimensions } from 'react-native'
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

const { width, height } = Dimensions.get("window")
const Tab = createBottomTabNavigator()

export default function () {
    return (
        <View style={{
            width,
            height,
        }}>
            <Tab.Navigator>
                <Tab.Screen
                    name="Screen1"
                    component={Component}
                />
                <Tab.Screen
                    name="Screen2"
                    component={Component}
                />
                <Tab.Screen
                    name="Screen3"
                    component={Component}
                />
            </Tab.Navigator>
        </View>
    )
}

Answer 6

请使用这个

<Tab.Navigator
screenOptions={{
    tabBarHideOnKeyboard: true
 }}
/>

我相信它会完美地工作

Answer 7

如果您在搜索栏中使用 TextInput，则可以在 TextInput 聚焦（并且键盘显示）时隐藏底部选项卡，如下所示：

const [searchBarFocused, setSearchBarFocused] = useState(false)

在标记中：

<TextInput
onFocus = {()=> setSearchBarFocused(true)}
onBlur = {()=> setSearchBarFocused(false)}
 /> 

//Other code

{!searchBarFocused && <CustomBottomTab/>}

对于细粒度控制，请在 textInput 上放置一个 ref 以模糊/聚焦以及不以编程方式进行的操作。

此外，您可以查看 RN:s KeyboardAvoidingView

Answer 8

screenOptions={{ headerShown: false, tabBarActiveTintColor: '#1a3c43', tabBarInactiveTintColor: '#1a3c43', tabBarActiveBackgroundColor: 'white', tabBarInactiveBackgroundColor: '#1a3c43',

      tabBarHideOnKeyboard: true,

      tabBarstyle: {
          backgroundColor: '#1a3c43',
          paddingBottom: 3
      }
  }}

Answer 9

<Tab.Navigator screenOptions={{ tabBarHideOnKeyboard: Platform.OS!== 'ios'}}>

</Tab.Navigator>

它可以完美地在反应原生的两个平台上工作

Answer 10

我怀疑这个问题永远不会被关闭，但如果有人偶然发现这个问题并需要答案，我建议您查看以下线程：

https://github.com/react-navigation/react-navigation/issues/6700

Tl; Dr 当为框架提供自定义导航栏时，您必须注意在键盘打开时隐藏所述栏。 这是因为它是默认的 android 行为。

因此，要么更改清单配置，因为作者已经将其描述为他的第一个不起作用的解决方案。

或修改您的组件以收听 react-natives KEYBOARD。 keyboardDidShow 和 keyboardDidHide 事件，或者使用 bottomMargin: -XYZ 将其向下移动，或者使用标志将其完全隐藏。

以下关于 github 的两个回复帮助了我：

https://github.com/react-navigation/react-navigation/issues/6700#issuecomment-625985764

https://github.com/react-navigation/react-navigation/issues/618#issuecomment-303975621

万一有人想用我的代码作为参考

interface BottomTabStateProps {
// unrelated Props
}

interface BottomTabDispatchProps {
// unrelated service dispatchers
}

interface BottomTabState {
    navVisible: boolean;
}

class BottomTabContainerClass extends React.Component<
    BottomTabStateProps & BottomTabDispatchProps & NavigationInjectedProps, BottomTabState
> {

    constructor(props: BottomTabStateProps & BottomTabDispatchProps & NavigationInjectedProps) {
        super(props);

        this.state = {
        navVisible: true
        };
    }

    componentDidMount() {
        Keyboard.addListener('keyboardDidShow', () => this.keyboardDidShow());
        Keyboard.addListener('keyboardDidHide', () => this.keyboardDidHide());
    }

    componentWillUnmount() {
        Keyboard.removeAllListeners('keyboardDidShow');
        Keyboard.removeAllListeners('keyboardDidHide');
    }


    keyboardDidShow() {
        this.setState({ navVisible: false });
    }

    keyboardDidHide() {
        this.setState({ navVisible: true });
    }

    render() {

        return (
            <View>
                {
                    this.state.navVisible &&
                    <View>
                          // add custom Navbar here
                    </View>
                }
            </View>
        );
    }
}