我遇到的问题是,当使用嵌套react-navigation
在选项卡导航器内的堆栈导航器来实现基本的聊天 UI 外观时,键盘隐藏了底部的聊天消息输入字段。因此,我尝试KeyboardAvoidingView
将键盘调到可见位置,但键盘没有显示。我尝试了一个涉及添加headerHeight
到keyboardVerticalOffset
prop 的解决方案,但似乎减少了大约 50px。例如,如果我添加headerHeight + 50
的keyboardVerticalOffset
所有内容看起来都很棒,但如果我将设备切换到 iPhone 5 或其他设备,屏幕较小,安全区域插入不同等,键盘将再次处于错误位置。
我不确定罪魁祸首到底是什么,但我现在认为这是顶部和/或底部的 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, …
Run Code Online (Sandbox Code Playgroud) 调用的组件SafeAreaView
由react-native、react-navigation、react-native-safe-area-context和react-native-safe-area-view导出。
有什么区别,我应该在哪些情况下使用哪个?
react-native react-navigation safeareaview react-native-safe-area-view
当尝试从“react-native-gifted-chat”导入和使用 GiftedChat 组件时,我收到此错误:
Invariant Violation: Tried to register two views with the same name RNCSafeAreaProvider, js engine: hermes
我已经尝试过这里列出的几件事。人们似乎对与“react-native-safe-area-context”相关的其他软件包也有类似的问题。
我没有使用 expo,但我使用的是 React Native CLI。
在我看来,问题出在“react-native-gifted-chat”上。
细节:
如果有人有任何想法或见解,我将不胜感激。如果我找到解决方案,我会将其作为评论发布。
react-native react-native-gifted-chat react-native-safe-area-view
是否可以react-native-safe-area-context
仅水平使用React Native SafeAreaView()(或删除生成的顶部填充)?当在从底部滑动的模式中使用它时,iPhone X 间距会添加到顶部,尽管它实际上距离屏幕顶部很远。它应该只在横向中向左侧和右侧添加必要的间距。