我遇到的问题是在使用react-navigation嵌套在选项卡导航器中的堆栈导航器以获得基本的聊天 UI 外观时，键盘隐藏了底部的聊天消息输入字段。所以我试着把KeyboardAvoidingView键盘抬到一个可见的位置，但键盘没有显示出来。我尝试了一个涉及添加headerHeight到keyboardVerticalOffset道具的解决方案，但它似乎关闭了大约 50 像素。例如，如果我添加headerHeight + 50的keyboardVerticalOffset所有内容看起来都很棒，但如果我将设备切换到 iPhone 5 或其他设备，屏幕更小，SafeArea 插入不同等，键盘将再次处于错误位置。
我不确定罪魁祸首究竟是什么，但我现在认为这是顶部和/或底部的 SafeArea 填充，我了解到这是“插图”。我正在尝试使用useSafeAreaInsets，但所有值都返回 0！我想使用这些插图添加到keyboardVerticalOffset道具中，以便避免视图正常工作。
我现在喜欢标签栏的样式，所以我想保持它的高度、填充和字体大小增加，但也许我在反应原生导航时做错了？也许我不能像 React Native 那样拥有这个标签栏和堆栈导航器样式？无论如何，我相信插图应该返回一个值，所以我认为这就是问题所在。
请注意，如果我将<SafeAreaView>块移动到包围<TouchableWithoutFeedback>而不是包围<NavigationContainer>块，并删除添加到 的 50 个额外像素keyboardVerticalOffset，那么键盘会正确向上推动输入字段，但 iPhone 11 上的标签栏图标被压扁。在我写这篇文章时，我注意到这个变化现在让底部/顶部填充变量返回值？如果我然后删除tabBarOptions，我会得到工作选项卡的基本外观，但我更喜欢我的初始选项卡的设计。
如何保持标签栏的当前样式并让键盘避开每个设备上的聊天输入字段？
（注意：useEffect下面的用法是我尝试使用此问题中概述的解决方案：https ://github.com/th3rdwave/react-native-safe-area-context/issues/54 ）
应用程序.js：
import React, { Component, useEffect, useState } from 'react';
import { View, KeyboardAvoidingView, TextInput, Text, Platform, TouchableWithoutFeedback, Keyboard, ActivityIndicator, SafeAreaView, ScrollView, Button, StatusBar } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { createStackNavigator, useHeaderHeight } from '@react-navigation/stack';
import FontAwesome5 from 'react-native-vector-icons/FontAwesome5';
import { useSafeAreaInsets, useSafeAreaFrame } from 'react-native-safe-area-context';
import { Dimensions } from 'react-native';
const Stack = createStackNavigator();
function TicketStack() {
return (
<Stack.Navigator
screenOptions={{
headerStyle: {
backgroundColor: "dodgerblue",
elevation: 0, // remove shadow on Android
shadowOpacity: 0, // remove shadow on iOS
},
headerTintColor: "#fff",
headerTitleStyle: {
fontWeight: "900",
fontSize: 26,
},
}}>
<Stack.Screen name="Ticket">
{(props) => <TicketScreen {...props} />}
</Stack.Screen>
<Stack.Screen name="Chat">
{(props) => <ChatScreen {...props} />}
</Stack.Screen>
</Stack.Navigator>
);
}
function HomeScreen() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text><FontAwesome5 name={"home"} size={20} color={"dodgerblue"} /> Home screen!</Text>
</View>
);
}
function TicketScreen(props){
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Ticket screen :)!</Text>
<Button title="Go to Chat" onPress={() => props.navigation.navigate('Chat')} />
</View>
);
}
function CustomKeyboardAvoidingView({ children, style }) {
const headerHeight = useHeaderHeight();
console.log("headerHeight: " + headerHeight)
console.log("StatusBar.currentHeight: " + StatusBar.currentHeight)
const insets = useSafeAreaInsets();
console.log("insets.top: " + topPadding)
console.log("insets.bottom: " + bottomPadding)
const [bottomPadding, setBottomPadding] = useState(insets.bottom)
const [topPadding, setTopPadding] = useState(insets.top)
useEffect(() => {
setBottomPadding(insets.bottom)
setTopPadding(insets.top)
console.log("topPadding: " + topPadding)
console.log("bottomPadding: " + bottomPadding)
}, [insets.bottom, insets.top])
// const frame = useSafeAreaFrame();
// const windowHeight = Dimensions.get('window').height
// console.log("frame.height: " + frame.height)
// console.log("windowHeight: " + windowHeight)
// const safeAreaHeight = windowHeight - frame.height
// console.log("safeAreaHeight: " + safeAreaHeight)
// safeAreaHeight is too much, needs to just be bottom or top padding from safearea
return (
<KeyboardAvoidingView
style={style}
behavior={Platform.OS == "ios" ? "padding" : "height"}
keyboardVerticalOffset={headerHeight + 50}
>
{children}
</KeyboardAvoidingView>
);
}
function ChatScreen(){
return(
<TouchableWithoutFeedback onPress={Keyboard.dismiss}>
<CustomKeyboardAvoidingView style={{backgroundColor: "#fff", flex: 1, flexDirection: "column", justifyContent: "space-between" }}>
<View style={{backgroundColor: "dodgerblue", paddingVertical: 15}}>
<View style={{ margin: 10, marginBottom: 15}}>
<ActivityIndicator size="large" style={{marginBottom: 10}}/>
<Text>Waiting for more info here....</Text>
</View>
</View>
<ScrollView style={{backgroundColor: "tomato", paddingVertical: 15}}>
<Text>Chat messages</Text>
<Text>Chat messages</Text>
<Text>Chat messages</Text>
<Text>Chat messages</Text>
<Text>Chat messages</Text>
<Text>Chat messages</Text>
<Text>Chat messages</Text>
<Text>Chat messages</Text>
<Text>Chat messages</Text>
<Text>Chat messages</Text>
<Text>Chat messages</Text>
<Text>Chat messages</Text>
<Text>Chat messages</Text>
<Text>Chat messages</Text>
<Text>Chat messages</Text>
<Text>Chat messages</Text>
<Text>Chat messages</Text>
<Text>Chat messages</Text>
<Text>Chat messages</Text>
<Text>Chat messages</Text>
<Text>Chat messages</Text>
<Text>Chat messages</Text>
<Text>Chat messages</Text>
</ScrollView>
<View style={{backgroundColor: "yellow", paddingVertical: 15}}>
<TextInput placeholder="Type your message here..." />
</View>
</CustomKeyboardAvoidingView>
</TouchableWithoutFeedback>
)
}
const Tab = createBottomTabNavigator();
// TODO:
// - removing safeareaview makes tabs squished and icon nearly invisible, but chat message input fields avoids keyboard properly (squished can be fixed by removing tabBarOptions)
// - having safeareaview makes tabs look good, but chat message input field is hidden by keyboard
// - safeareainsets? why are they 0? i would be adding the bottom or top padding of insets to the vertical offset of the keyboard avoiding view.
export default class App extends Component {
render(){
return (
<SafeAreaView style={{flex: 1, backgroundColor: "dodgerblue"}}>
<NavigationContainer>
<Tab.Navigator
screenOptions={({ route }) => ({
tabBarIcon: ({ color, size }) => {
let iconName;
if (route.name === 'Home') {
iconName = 'home';
} else if (route.name === 'Ticket') {
iconName = 'question';
}
return <FontAwesome5 name={iconName} size={size} color={color} />;
},
})}
tabBarOptions={{
style: {
height: 70
},
activeTintColor: "#fff",
inactiveTintColor: "dodgerblue",
inactiveBackgroundColor: "#fff",
activeBackgroundColor: "dodgerblue",
tabStyle: {
paddingTop: 10,
paddingBottom: 10
},
labelStyle: {
fontSize: 14
},
}}>
<Tab.Screen name="Home">
{(props) => <HomeScreen {...props} />}
</Tab.Screen>
<Tab.Screen name="Ticket">
{(props) => <TicketStack {...props} />}
</Tab.Screen>
</Tab.Navigator>
</NavigationContainer>
</SafeAreaView>
);
}
}
截屏：
包.json：
{
"name": "ReactNativeTest",
"version": "0.0.1",
"private": true,
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"start": "react-native start",
"test": "jest",
"lint": "eslint ."
},
"dependencies": {
"@react-native-community/masked-view": "^0.1.10",
"@react-navigation/bottom-tabs": "^5.9.2",
"@react-navigation/native": "^5.7.6",
"@react-navigation/stack": "^5.9.3",
"react": "16.13.1",
"react-native": "0.63.3",
"react-native-gesture-handler": "^1.8.0",
"react-native-reanimated": "^1.13.1",
"react-native-safe-area-context": "^3.1.8",
"react-native-screens": "^2.11.0",
"react-native-vector-icons": "^7.1.0"
},
"devDependencies": {
"@babel/core": "7.11.6",
"@babel/runtime": "7.11.2",
"@react-native-community/eslint-config": "1.1.0",
"babel-jest": "25.5.1",
"eslint": "6.8.0",
"jest": "25.5.4",
"metro-react-native-babel-preset": "0.59.0",
"react-test-renderer": "16.13.1"
},
"jest": {
"preset": "react-native"
}
}