打開鍵盤時反應原生底部標簽欄向上推

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>
        );
    }
}