与 map一起使用时,KeyboardAvoidingView会不断调整其高度。禁用KeyboardAvoidingView时,一切正常。
behavior
选项,但是没有一个可以解决问题视频:https://www.dropbox.com/s/f8tix2gqmqz7i0i/height_bug.mov?dl = 0
结构的一小部分:
<View style={ styles.container }>
<MapView style={ styles.map } provider="google">
{ markers }
<KeyboardAvoidingView behavior="padding" keyboardVerticalOffset={ 90 }>
<View style={ styles.footer }>
<SafeAreaView>
{ toolbar }
</SafeAreaView>
</View>
</KeyboardAvoidingView>
</View>
可能相关的样式:
const styles = StyleSheet.create({
container: {
flex: 1
},
map: {
flex: 1
},
footer: {
backgroundColor: colors.WHITE
},
footerToolbar: {
flexDirection: 'row',
padding: sizes.SCREEN_MARGIN / 2
}
})
反应本机信息:
info
React Native Environment Info:
System:
OS: macOS 10.14.5
CPU: (8) x64 Intel(R) Core(TM) i7-8559U CPU @ 2.70GHz
Memory: 1.58 GB / 16.00 GB
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 10.15.3 - /usr/local/bin/node
Yarn: 1.15.2 - /usr/local/bin/yarn
npm: 6.9.0 - /usr/local/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
SDKs:
iOS SDK:
Platforms: iOS 12.2, macOS 10.14, tvOS 12.2, watchOS 5.2
IDEs:
Xcode: 10.2.1/10E1001 - /usr/bin/xcodebuild
npmPackages:
react: 16.8.6 => 16.8.6
react-native: https://github.com/expo/react-native/archive/sdk-33.0.0.tar.gz => 0.59.8
npmGlobalPackages:
react-native-cli: 2.0.1
尝试使用将整个组件包装在容器中KeyboardAvoidingView
。该组件基本上只是View
底部带有填充的。另外,如果要使用SafeAreaView
它,则最好将其放置在外部组件上,因为它用于在iOS上为外部视图提供间距,以确保它清除带有缺口且没有按钮的iOS设备的边缘。