[英]React native bottom tab bar pushing itself up when opening keyboard
We are using createBottomTabNavigator.我们正在使用 createBottomTabNavigator。 In one of the tab contains search bar at the top.
在其中一个选项卡的顶部包含搜索栏。 While clicking on that search bar, we are opening the keyboard.
单击该搜索栏时,我们正在打开键盘。 But the keyboard pushing up the bottom tab bar also.
但键盘也将底部标签栏向上推。 We need the bottom tab bar remains at the bottom when opening keyboard.
打开键盘时,我们需要底部标签栏保持在底部。
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
}
}
}
);
只需转到AndroidManifest.xml
文件并更改/添加内部activity
标签:
android:windowSoftInputMode="adjustPan"
I got solution for this problem.我得到了这个问题的解决方案。 Previously, I have done a minor mistake while configuring 'react-native-android-keyboard-adjust'.
以前,我在配置“react-native-android-keyboard-adjust”时犯了一个小错误。 Now it is working fine.
现在它工作正常。 So we can change the 'windowSoftInputMode' for a particular component using this library - https://www.npmjs.com/package/react-native-android-keyboard-adjust
因此,我们可以使用此库更改特定组件的“windowSoftInputMode” - https://www.npmjs.com/package/react-native-android-keyboard-adjust
I was having the exact same issue.我遇到了完全相同的问题。 Following are the two ways I successfully tackled it.
以下是我成功解决它的两种方法。
"softwareKeyboardLayoutMode":"pan"
to the app.json like below"softwareKeyboardLayoutMode":"pan"
到 app.json 中,如下所示"android": {
"adaptiveIcon": {
"foregroundImage": "./assets/adaptive-icon.png",
"backgroundColor": "#FFFFFF"
},
"softwareKeyboardLayoutMode":"pan"
}
by doing this, the bottom navigator was staying hidden behind the keyboard.通过这样做,底部导航器隐藏在键盘后面。 however, the
ScrollView
containing TextInputs
was not working the way I wanted it to.然而,包含
TextInputs
的ScrollView
并没有按照我想要的方式工作。 the whole app screen was getting translated by the height of the keyboard, hiding half of my ScrollView
and everything above it (Header and stuff).整个应用程序屏幕都被键盘的高度转换了,隐藏了我的
ScrollView
一半和它上面的所有东西(标题和东西)。
"softwareKeyboardLayoutMode"
so that it defaults to height
(this causes the CustomBottomTabNav
to rise above the keyboard as the whole screen gets squeezed in the remaining height) step 2: dynamically reset the position of CustomBottomTabNav
when the keyboard is active."softwareKeyboardLayoutMode"
,使其默认为height
(这会导致CustomBottomTabNav
上升到键盘上方,因为整个屏幕被挤压在剩余高度中)第 2 步:当键盘处于活动状态时动态重置CustomBottomTabNav
的位置。 In the screen containing TextInputs
在包含
TextInputs
的屏幕中
<ScrollView style={{ height: keyboard.keyboardShown? 510 - keyboard.keyboardHeight: 510}}>
/* lots of text inputs*/
</ScrollView>
In the CustomBottomTabNav
在
CustomBottomTabNav
tabBarOptions={{
...otherStuff,
style={{ bottom: keyboard.keyboardShown? -100: -10, ...otherStuff}}
}}
This second method is working much more reliably.第二种方法的工作更可靠。 I tried
keyboardAvoidingView
but was unable to wrap my head around its unpredictable behavior.我尝试过
keyboardAvoidingView
但无法理解其不可预测的行为。
Found it, just add your bottom navigation into a view making that view of dimensions of the screen, this way:找到它,只需将您的底部导航添加到一个视图中,以制作屏幕尺寸的视图,这样:
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>
)
}
Please use this on请使用这个
<Tab.Navigator
screenOptions={{
tabBarHideOnKeyboard: true
}}
/>
I am sure it will work perfectly我相信它会完美地工作
If you are using a TextInput in the search bar you could hide the bottom tab when TextInput is focused (and the keyboard shows) like so:如果您在搜索栏中使用 TextInput,则可以在 TextInput 聚焦(并且键盘显示)时隐藏底部选项卡,如下所示:
const [searchBarFocused, setSearchBarFocused] = useState(false)
In the markup:在标记中:
<TextInput
onFocus = {()=> setSearchBarFocused(true)}
onBlur = {()=> setSearchBarFocused(false)}
/>
//Other code
{!searchBarFocused && <CustomBottomTab/>}
For finegrained control put a ref on the textInput to blur/focus and what not programmatically.对于细粒度控制,请在 textInput 上放置一个 ref 以模糊/聚焦以及不以编程方式进行的操作。
Also, you can check out RN:s KeyboardAvoidingView此外,您可以查看 RN:s KeyboardAvoidingView
screenOptions={{ headerShown: false, tabBarActiveTintColor: '#1a3c43', tabBarInactiveTintColor: '#1a3c43', tabBarActiveBackgroundColor: 'white', tabBarInactiveBackgroundColor: '#1a3c43', screenOptions={{ headerShown: false, tabBarActiveTintColor: '#1a3c43', tabBarInactiveTintColor: '#1a3c43', tabBarActiveBackgroundColor: 'white', tabBarInactiveBackgroundColor: '#1a3c43',
tabBarHideOnKeyboard: true,
tabBarstyle: {
backgroundColor: '#1a3c43',
paddingBottom: 3
}
}}
<Tab.Navigator screenOptions={{ tabBarHideOnKeyboard: Platform.OS!== 'ios'}}>
</Tab.Navigator>
It will work perfectly for both platforms in react native它可以完美地在反应原生的两个平台上工作
I doubt this question is ever going to be closed but in case someone stumbles over this problem and needs an answer, I'd recommend looking through the following thread:我怀疑这个问题永远不会被关闭,但如果有人偶然发现这个问题并需要答案,我建议您查看以下线程:
https://github.com/react-navigation/react-navigation/issues/6700 https://github.com/react-navigation/react-navigation/issues/6700
Tl;Dr When supplying the framework with a custom navbar, you have to take care of the hiding of the said bar on keyboard opening. Tl; Dr 当为框架提供自定义导航栏时,您必须注意在键盘打开时隐藏所述栏。 This is because it is the default android behaviour.
这是因为它是默认的 android 行为。
So either change the manifest configuration as the author already described as his first solution that didn't work.因此,要么更改清单配置,因为作者已经将其描述为他的第一个不起作用的解决方案。
OR modify your component to listen to the react-natives KEYBOARD.或修改您的组件以收听 react-natives KEYBOARD。 keyboardDidShow & keyboardDidHide Events and either move it down with bottomMargin: -XYZ or hide it completely with a flag.
keyboardDidShow 和 keyboardDidHide 事件,或者使用 bottomMargin: -XYZ 将其向下移动,或者使用标志将其完全隐藏。
following two responses on github helped me:以下关于 github 的两个回复帮助了我:
https://github.com/react-navigation/react-navigation/issues/6700#issuecomment-625985764 https://github.com/react-navigation/react-navigation/issues/6700#issuecomment-625985764
https://github.com/react-navigation/react-navigation/issues/618#issuecomment-303975621 https://github.com/react-navigation/react-navigation/issues/618#issuecomment-303975621
In case someone wnats to use my code as a reference万一有人想用我的代码作为参考
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>
);
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.