添加新ScrollView时在KeyboardAvoidingView中自动滚动TextInput
在React Native开发中，可以使用KeyboardAvoidingView组件来在键盘出现时自动调整视图，以避免键盘遮挡输入框。当需要在KeyboardAvoidingView中添加新的ScrollView并实现自动滚动TextInput的功能时，可以按照以下步骤操作：
- 在React Native中，ScrollView是一个可滚动的容器，可用于显示大量的数据或者嵌套其他视图组件。它提供了垂直和水平方向的滚动。
- KeyboardAvoidingView是一个高级组件，可以在键盘弹出时自动调整其子组件的位置，确保输入框不会被键盘遮挡。它在不同的平台上表现不同，比如iOS上会将整个视图上移，而Android上会通过滚动视图实现。
- 要在KeyboardAvoidingView中实现自动滚动TextInput，需要将TextInput组件包装在ScrollView中。这样当键盘弹出时，ScrollView会自动滚动，使TextInput可见。
示例代码如下：
import React from 'react';
import { KeyboardAvoidingView, ScrollView, TextInput, View } from 'react-native';
const App = () => {
return (
<KeyboardAvoidingView style={{ flex: 1 }} behavior="padding">
<ScrollView contentContainerStyle={{ flexGrow: 1 }}>
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
{/* 其他组件 */}
<TextInput
style={{ height: 40, borderColor: 'gray', borderWidth: 1, margin: 10 }}
placeholder="Type here..."
/>
{/* 其他组件 */}
</View>
</ScrollView>
</KeyboardAvoidingView>
);
}
export default App;上述代码中，KeyboardAvoidingView作为根容器，设置了flex: 1来充满整个屏幕。behavior属性设置为"padding"，以确保在键盘弹出时底部留出足够空间。
ScrollView作为KeyboardAvoidingView的子组件，通过contentContainerStyle的flexGrow: 1设置为充满整个ScrollView。这样当键盘弹出时，ScrollView会自动滚动。
在ScrollView内部可以放置其他的视图组件，例如TextInput用于输入文本。你可以根据实际需求添加更多的组件。
注意：这只是一个示例代码，你可以根据自己的项目需求进行适当的调整。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云开发者平台：https://cloud.tencent.com/developer
- 云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 云数据库MySQL版：https://cloud.tencent.com/product/cdb-for-mysql
- 云原生容器服务：https://cloud.tencent.com/product/tke
- 人工智能平台：https://cloud.tencent.com/product/ai
- 物联网开发平台：https://cloud.tencent.com/product/iotexplorer
- 腾讯云存储（COS）：https://cloud.tencent.com/product/cos
- 区块链服务：https://cloud.tencent.com/product/tbaas
- 腾讯云音视频服务：https://cloud.tencent.com/product/tencentlive
- 元宇宙：https://cloud.tencent.com/product/metauniverse
相关·内容
我在ScrollView中使用了很多TextInput。我想当焦点在一个TextInput上，然后自动滚动到这个TextInput。我的代码如下：
<View style = {{width: '100%', height: '85%'}}>
<ScrollView showsVerticalScrollIndicator = {false} style = {{marginLeft: 10, marginRight: 10}}
keyboardShouldPersistTaps={true}
>
浏览 1提问于2018-12-08得票数 1
我有一个TextInput，它是多行的，可以超过屏幕的整个高度。它占据了整个屏幕。每当有文字占据整个屏幕，我就不能向下滚动或向上滚动。每当我点击向下滚动或向上滚动，它集中在我点击的文本输入。
ScrollView的向上或向下滚动功能不再起作用。
当TextInput占据整个屏幕时，我如何保持滚动功能？
这是我的密码：
<KeyboardAvoidingView
style={styles.screen}
behavior={Platform.OS === "ios" ? "padding" : "height"}
>
浏览 2提问于2022-03-29得票数 0
<View>
<View style = {{height : X}}></View>
<ScrollView>
<KeyboardAvoidingView>
<View style = {{height : 350}}></View>
<TextInput/>
<View style = {{height : 500}}></View>
</Keyb
浏览 3提问于2018-09-20得票数 1
回答已采纳
我目前有一个类似下面这样的设置： <ScrollView>
...
<TextInput multiline={true} />
...
<NextButton />
</ScrollView> 当我在多行TextInput中键入内容时，键盘显示出来，并开始“隐藏”ScrollView的某些部分。 如果我输入太多，它甚至会开始隐藏TextInput的一部分。 我可以添加一个KeyboardAvoidingView，但结果仍然是隐藏了ScrollView的某些部分： <KeyboardAvoidi
浏览 38提问于2021-11-04得票数 0
回答已采纳
我使用的是KeyboardAvoidingView和ScrollView和TextInput。当前几个TextInput聚焦时，键盘就会出现，并将TextInput移出屏幕太高。
我尝试过将KeyboardAvoidingView作为父标记，ScrollView作为子标记，反之亦然。我还玩过KeyboardAvoidingView的道具(keyboardVerticalOffset，behavior等)。然而，他们中的任何一个都不起作用。我还测试了react-native-keyboard-aware-scrollview包，完全没有工作。
<KeyboardAvoidingView b
浏览 0提问于2019-04-11得票数 0
我正在使用react本机TextInput组件。在这里，如果用户单击InputBox字段，我需要显示键盘上方的textInput。
我在下面试过了，但我正面临着问题
1.键盘避免查看
a. Here it shows some empty space below the input box
b. Manually I need to scroll up the screen to see the input field which I was given in the text field
c. Input box section is hiding while placing the
浏览 0提问于2019-02-06得票数 23
我正在使用KeyboardAvoidingView，除了一个小问题之外，它工作得非常好。在下面的代码中，我有一个TouchableOpacity，当单击它时，它会运行函数addName()，该函数会附加到一个数组中并创建一个新的TextInput -基本上，当您单击它时，它会将一个新的TextInput添加到ScrollView中。 除了每次添加/呈现新的TextInput时，我必须向下滚动才能看到它之外，KeyboardAvoidingView运行得非常好。您知道如何在呈现新的TextInput时自动滚动到底部吗？ 下面是我的KeyboardAvoidingView代码： <Keyb
浏览 8提问于2020-10-22得票数 0
回答已采纳
[误差图像]
当前行为如果我试图在视图中嵌套一个ScrollView，我就会收到这个图像。
预期行为，因为KeyBoardAvoidingView将输入框推到顶部并隐藏其中一些，所以希望ScrollView能够滚动输入框，这样就可以看到隐藏的内容，但是当我尝试使用代码时，会在上面的图像中得到错误。
import React from 'react';
import {StyleSheet, View, TextInput, TouchableOpacity, Text, KeyboardAvoidingView, StatusBar, ScrollView} from '
浏览 5提问于2018-01-15得票数 7
我使用React的，将行为设置为填充(在Android上进行测试)。
我的屏幕上有多个TextInputs。当我单击最终的TextInput时，键盘就会覆盖它。我现在可以滚动下来，因为填充从KeyboardAvoidingView，但它是理想的让它自动滚动焦点。
<Content>
<KeyboardAvoidingView behavior='padding'>
<TextInput placeholder='Example 1' />
<TextInput placeholder='Exa
浏览 18提问于2017-05-08得票数 32
回答已采纳
1回答
我在屏幕底部有一个文本输入，当按下一些选项时，它会扩展到一个更大的部分。当键盘打开时，bottomHeight和height会增加。
当按下额外容器中的其中一个预定义的tags时，我不想关闭键盘，但无法工作，需要一些帮助。
我已经按照其他地方的建议，将textinput包装在滚动视图中，尝试使用keyboardShouldPersistTaps和keyboardDismissMode，但它不起作用。
没有要更新的父ScrollViews、ListViews或FlatLists，但是该组件位于由SafeAreaView包装的Modal中。
<KeyboardAvoidingView sty
浏览 4提问于2020-07-26得票数 2
回答已采纳
4回答
键盘重叠底部按钮，直到刷新屏幕。
、、、、
我有以下组件:带有TextInput和Button的Button。我要TextInput在顶部，Button在底部(justifyContent: 'space-between')。我是从Android本地应用程序运行这个组件的。所以我正在开发一个混合应用程序。
问题：
当我点击TextInput时，键盘就会出现，并与底部的button重叠。如果在此之后，我通过下拉方式刷新scrollView，则在键盘上显示底部的button (我想要的)。
在RefreshControl呈现之后发生了一些事情，这设置了button的正确位置。但是，我的组件看起来不太好，直到我拉起刷新它，并激
浏览 6提问于2019-01-23得票数 0
回答已采纳
我在FlatList里面有一个KeyboardAvoidingView。当显示键盘时，我想滚动到FlatList的末尾。
我正在侦听“keyboardDidShow”事件，它确实会被触发，但是它可能会被过早地触发，因为在调用scrollToEnd之后，FlatList不会滚动到结束。
我已经了解了onLayout事件的KeyboardAvoidingView，但是，只要设置onLayout事件来触发一个函数，就会阻止KeyboardAvoidingView在显示键盘时调整其大小。
<KeyboardAvoidingView behavior='padding' style
浏览 3提问于2017-05-17得票数 42
回答已采纳
我有多个文本输入。当焦点集中时，它们就会弹出键盘(使用keyboardAwareScrollView)。但是，我想在输入和键盘之间增加大约50英尺的高度。整个屏幕是一个滚动视图。我试过使用keyboardAwareScrollView，但这在安卓系统上是非常不一致的。另外，是否可以使用keyboardAvoidingView？
带键盘避免查看的代码
const Instruction = ({navigation}) => {
const [tags, setTags] = useState([]);
const suggestions = ['apple',
浏览 4提问于2022-02-18得票数 0
我的TextInput有个问题。当我试图输入文本时，键盘打开，并在输入之间添加空格。我试着用Android，但我没有解决办法。
KeyboardAvoidingView与KeyboardAwareScrollView的工作方式不同，因为我使用垂直滚动。
我正在使用React 17.0.2 React本地0.66.3和React导航5.9.8
如果有人能帮我谢谢！
屏幕截图链接： +
return (
<SafeAreaView>
<KeyboardAvoidingView
style={styles.keyboard}
enable
//keyb
浏览 6提问于2022-08-12得票数 0
KeyboardAvoidingView不能正常工作
我正在尝试将KeyboardAvoidingView与behavior="padding"一起使用。
由于某些原因，当我试图在TextInput中输入任何文本时，在TextInput下面有一个空格。附件是正在发生的事情的图片以及代码。有没有人知道这里发生了什么？
render() {
return (
<KeyboardAvoidingView style={{ flex: 1}} behavior="padding">
< View
浏览 8提问于2018-01-24得票数 72
我使用KeyboardAvoidingView用键盘向上移动一个按钮，在其中我有一个keybordShouldPersistTaps设置为always的滚动视图，在滚动视图中，我使用的是Formik表单。我仍然需要双击一个按钮两次，才能让键盘解除并提交我的数据。我总是试图手动关闭/处理滚动视图上的键盘，但没有成功，还有其他方法我应该尝试一下吗？
<KeyboardAvoidingView style={{ flex: 1 }} behavior={'padding'}>
<ScrollView contentContainerStyle={{ flex
浏览 0提问于2019-05-10得票数 2
我正在用react原生构建一个聊天UI，并且在ScrollView中使用KeyboardAvoidingView时遇到了问题。选择TextInput时，输入栏和键盘之间的高度似乎会根据我使用的设备而有所不同。我如何对此进行标准化，使其在所有设备上都能平等地工作？
import React from 'react'
import { StyleSheet, View, Text, TextInput, ScrollView, KeyboardAvoidingView, Platform } from 'react-native'
import Messa
浏览 44提问于2019-11-15得票数 1
回答已采纳
2回答
我在ScrollView和KeyboardAvoidingView中使用了KeyboardAvoidingView，但是当键盘打开时，提交文本需要两次点击。
为了解决这个问题，我加入了keyboardShouldPersistTaps="always"，但是它不起作用。
render() {
return (
<View style={{flex: 1}}>
<KeyboardAvoidingView style={{flex:1}}>
<ScrollView keyboard
浏览 1提问于2019-06-11得票数 4
我很难让KeyboardAvoidingView在iOS中工作，特别是当它包装一个Modal时。在安卓系统中进行测试，Modal正确地避免了键盘，但在iOS中，键盘覆盖了Modal。
下面是一个可重复的示例，使用iPhone X作为我的测试设备：
import React, {useState} from 'react';
import {StyleSheet, ScrollView, View, Modal, TextInput, KeyboardAvoidingView, Button, SafeAreaView} from 'react-native';
浏览 0提问于2020-11-23得票数 9
回答已采纳
我在react-native的KeyboardAvoidingView中使用了keyboardVerticalOffset来使用静态按钮。但 ? 红色箭头显示了意外的行为。正如您所看到的，添加了额外的空间，但这是一个白色区域。 这是我的代码。 const Code = () => {
const emailInput = useRef(null);
const birthInput = useRef(null)
const scrollViewRef = useRef(null);
const [email, setEmail] = useState<s
浏览 44提问于2021-03-03得票数 1
在尝试从TextInput组件提交数据时，我遇到了问题。当尝试按下调用处理文本的回调的按钮时，需要按两次才能工作。对于TextInput，一次失去焦点，第二次调用回调。我试过解决方案，但对我没有用。
构成部分：
<Modal>
<ScrollView>
<Card>
<CardImage source={{uri: this.props.linkImage}}/>
<CardContent/>
</Card>
{
this.st
浏览 0提问于2018-06-15得票数 3
我们将TextInput封装在KeyboardAvoidingView中，所有这些都可以正常工作，直到一个人改变键盘以选择一个表情符号。键盘的大小随后会发生变化，并覆盖TextInput。
然后可以写一个表情，但用户不能再看到他/她的文本是怎么回事了。
这是我们的代码：
const headerHeight = useHeaderHeight();
..。
<KeyboardAvoidingView
behavior={Platform.OS == "ios" ? "padding" : "height"}
keyb
浏览 14提问于2022-03-25得票数 1
回答已采纳
当文本光标集中在TextInput上时，我想得到x，y的位置。
如何获得裁判位置？
这是我的密码
const Code = () => {
const emailInput = useRef();
const scrollViewRef = useRef();
const [email, setEmail] = useState<string>('');
const scrollToEmail = () => {
// I want to scroll the y position of the scroll to the cent
浏览 3提问于2021-03-03得票数 0
2回答
我一直在努力弄清楚在键盘打开后(至少在Android上)如何正确处理布局更改。我在用最新的世博会。我的表格示例：
<View style={{flex: 1}}>
<View style={{flex: 1}}></View>
<View style={{flex: 2}}>
<TextInput></TextInput>
<TextInput></TextInput>
<TextInput></TextInput>
浏览 28提问于2022-02-03得票数 0
3回答
我有一个TextInput和multiLine真。然而，在两行之后，文本消失在键盘后面。我尝试过用TextInput包装KeyboardAvoidingView，但它不起作用。
当我不对TextInput进行对焦时，键盘确实会将TextInput向上推高，然后单击底线。知道如何使TextInput的最后一行保持在键盘上吗？
守则：
<View style={styles.descriptionFlexStyle}>
<Text
style={[
styles.headerTextStyle,
{ marginTop:
浏览 0提问于2017-11-24得票数 1
回答已采纳
我在一个TextInput中有一些ScrollView组件。问题是，如果我关闭键盘返回或安卓后退按钮，选择的TextInput仍然集中，我必须点击两次，以聚焦另一个TextInput。
下面是我使用的组件：
<ScrollView style = {styles.scroll}>
<KeyboardAvoidingView styles={styles.container} behavior = 'padding' enabled>
<View style={styles.h
浏览 0提问于2018-05-30得票数 1
回答已采纳
我有一个比手机屏幕高度更长的表格。它是一个包含ScrollView组件的TextInput。问题是，当我想在TextInput上拖动开始触摸时，ScrollView不会移动。如果我从空格(代码示例中的View )开始拖动，它会完美地滚动。
这感觉就像TextInput在某种程度上正在吞噬触摸/拖动事件，不允许ScrollView进行交互。
ScrollView看起来与此类似：
function Form() {
return (
<ScrollView style={{ flex: 1, }}>
<TextInput place
浏览 5提问于2017-01-19得票数 14
回答已采纳
1回答
我试图填充输入数组中的“ans”字段，但当我输入其中一个输入时，它会覆盖状态中的所有其他对象。当我以正确的方式在其中一个输入中键入内容时，如何更新对象数组中的'ans‘字段，而不会覆盖状态中数组中的其他对象？ 我的代码： import React, { useState } from "react";
import {
StyleSheet,
View,
Text,
KeyboardAvoidingView,
ScrollView,
TextInput,
Button,
} from "react-native";
ex
浏览 30提问于2021-01-21得票数 0
在react native中使用KeyboardAvoidingView时，我遇到了一个问题。下面是我的代码：
<View style={styles.container}>
<View style = {styles.pagetitle_part}>
<Text style = {{fontSize: 25, color: '#ffffff'}}> Register User </Text>
<TouchableOpacity style = {{position: 'abs
浏览 3提问于2018-12-03得票数 2
我必须将KeyboardAvoidingView添加到我的视图中，因为我有文本输入。问题是keyboardVerticalOffset运行得很好。但在那之后，当我想要再次滚动到顶部时，这是不可能的。它缺少keyboardVerticalOffset。 const DismissKeyboard = ({children}) => (
<ScrollView style={{flex: 1}}>
<KeyboardAvoidingView
style={{ flex: 1 }}
keyboardVerticalOffset={50}
浏览 14提问于2021-09-25得票数 0
回答已采纳
当用户点击TextInput时，ScrollView会自动向下滚动，这样键盘就不会覆盖文本字段。
虽然这是一种非常有用的，也是可以期待的行为，但有什么办法可以防止这种情况发生呢？
我希望在键盘弹出后，ScrollView保持在完全相同的滚动位置，即使结果是文本字段被它覆盖。
下面是一个例子：
import React, {Component} from "react";
import {ScrollView, Text, TextInput} from "react-native";
export default class App extends Compo
浏览 2提问于2019-03-08得票数 6
2回答
我被React Native聊天应用搞疯了。我需要典型的应用程序结构: listView (我也尝试过使用FlatList，甚至ScrollView)和底部的textInput。当我专注于输入时，listView被键盘覆盖，我看不到我正在键入的内容。
我尝试了许多方法，但它们都不能像我预期的那样工作:我使用了KeyboardAvoidingView，也尝试了KeyboardAwareScrollView和KeyboardSpacer，但每次都得到一个错误:当我专注于输入时，在动画过程中列表被剪切，当我在输入之外单击时，底部有一个空白(当我轻轻滚动列表时，它就会被修复)。也许我使用了一个不好的结
浏览 0提问于2017-09-18得票数 2
所以我这里有这段代码。我不知道这是否是我构造它的原因，但是使用'set‘函数改变状态直到我再次改变条目之后才会改变状态。例如，我将输入文本，然后按"post“，这将更新状态，当console.warn打印时，不会打印任何内容。然后我再次更改文本并按下post，console.warn将输出最近一次更改之前的内容。 import React, {useState, createRef} from 'react';
import LinearGradient from 'react-native-linear-gradient';
import {
浏览 27提问于2021-08-02得票数 0
我正在使用Text Input的react-native-paper，并使用KeyboardAvoidingView删除keyboard issues并将Input字段放在KeyBoard之上，这对其他TextInput字段是有效的，但当我删除secureTextEntry={true}时，这在安卓上运行良好，但这不是解决方案，因为这一行在密码字段中是强制性的。我还尝试了很多库，比如react-native-keyboard-aware-scroll-view /* @flow */
import * as React from 'react';
import {
浏览 61提问于2019-02-26得票数 1
不管我做什么，KeyboardAvoidingView尽可能地缩小我的TextInputs，而不是在上面的内容中添加填充，然后将它们从屏幕上推开。
我想要的只是正常的行为，在使用这个组件的最简单的教程中可以看到，在屏幕上填充我的内容，没有什么东西会缩小。我尝试过所有的行为，以及各种视图层次的排列。不管我做什么，它都会缩小输入。
<KeyboardAvoidingView style={Styles.containerView} behavior={‘填充物’}><图像style={Styles.subLogo} /> <View style={justifyCo
浏览 1提问于2018-07-24得票数 2
回答已采纳
大家早上好。我从原生react开始，我想将相同的图像放到我的移动应用程序中，我为每个screes (页面)创建了一个使我的图像在每次改变屏幕时加载的页面，我想要做的是放入相同的图像，并为所有组件加载它，以便图像只为所有屏幕加载一次 我所做的是创建一个background.js组件，其中包含我导出并导入到其他屏幕中的，但它不起作用 下面是我在background.js中做的事情 import React from 'react';
import {
StyleSheet,
Text,
View,
TextInput,
KeyboardAv
浏览 21提问于2019-04-17得票数 0
回答已采纳
因此，我想安装反应-本机-键盘感知-滚动视图，因为<ScrollView></ScrollView>与<KeyboardAvoidingView></KeyboardAvoidingView>有一些错误。但是在我的例子中，当我在命令提示符中安装它并重新加载我的应用程序时，它会给我带来错误。
来源：
这是我的应用程序中的错误：
这是安装时命令提示符中的错误：
浏览 0提问于2018-10-11得票数 1
3回答
我正在尝试创建一个登录屏幕，但我找不到一种方法来使背景充满整个屏幕。当我将一种颜色应用于背景时，它只到达我放在屏幕上的最后一个视图。
我曾尝试将style = {{flex : 1}}放在KeyboardAvoidingView parents上，并尝试将布局包装在<View style={{flex: 1}} >中。
它似乎与KeyboardAvoidingView或ScrollView有关，但我不确定，也不知道我还能做什么。
import React, { useState } from "react";
import {
View,
Text
浏览 20提问于2020-11-12得票数 0
目前，在按下文本输入(注意没有标题，因为它是从屏幕中弹出的)之后，我就这样得到了页面：
我希望它是这样的(即使我按下文本输入，标题也应该保持在相同的位置)：
我在android清单中使用了这个：
android:windowSoftInputMode="adjustPan"
这是我的密码：
import React from 'react';
import {
View,
Dimensions,
TextInput,
ScrollView,
StatusBar,
Text,
KeyboardAvoidingView,
} fr
浏览 7提问于2022-08-09得票数 1
1回答
我正在使用一个打包的组件，它有一个工具栏(包含粗体、斜体、下划线等按钮)和一个编辑器(如TextInput)。 我希望工具栏正好在键盘和编辑器的上方，动态地改变它的高度，以占据垂直位置的其余部分(标题和工具栏之间)。 这就是我到目前为止所拥有的，工具栏就在水平滚动视图的下面(方块将在后面的图像中出现)。我怎样才能让这个工具栏附着在键盘上，并且textInput的高度动态地填充到它上面的屏幕上，直到标题？ ? 这是我到目前为止拥有的代码，不确定如何使它们动态！ <View behavior={'padding'} >
<Ri
浏览 7提问于2021-01-11得票数 0
回答已采纳
1回答
无法更新本机的状态吗？
、、、、
我对State不能设置有一些问题，当我按下按钮时，状态设置为“Login : true”，但是当我在8月出现一些错误时，我需要设置状态“Login: false”，在这种情况下，我需要设置状态“Login:false”，以返回登录屏幕，但却卡在Login中！错误是
"(id: 0)：TypeError: this.setState不是函数“
注意:我使用的是react本机防火墙，这是我的代码。
import React, { Component } from "react";
import {
View,
Text,
KeyboardAvo
浏览 0提问于2019-03-21得票数 1
回答已采纳
我有一个名为MDropDowlList的组件，它呈现以下视图：
MDropDownList.js
render() {
return (
<View>
<View
style={{
backgroundColor: '#fff',
position: 'absolute',
left: 0,
right: 0
浏览 0提问于2019-07-11得票数 0
当我开始输入一些消息时，标题和聊天容器都会移动。
我尝试在我的视图容器中使用KeyboardAvoidingView，但是它没有工作，我不确定KeyboardAvoidingView是否是控制视图中键盘的最佳解决方案，并且不熟悉它。
下面是我的代码：
render() {
const { myName, user, nome, message } = this.props;
return (
<View style={STYLES.main}>
<Animatable.View
style={STYLES.container}
anima
浏览 0提问于2019-05-28得票数 1
回答已采纳
请不要将其标记为duplicate.It不是。我还没有找到适合我的任何可行的解决方案。
所以基本上，我一直在浏览stackoverflow和GitHub，我没有得到任何适合我的东西。如果我将KeyboardAvoidingView的behavior设置为padding，则不会发生任何事情。但是，position或height工作得很好，正如预期的那样。有没有人知道为什么？这里我需要填充，特别是。不管我把我的KeyboardAvoidingView标签放在哪里，或者我用它包装了什么，它都不会工作。
基本上，我是想让<RichToolbar>在我打开键盘时被推上去。看起来很简单，花了一
浏览 0提问于2020-03-10得票数 1
1回答
使用，我有一个基本的例子，在这个例子中，我希望键盘向上推输入，这样就不会在Android上重叠。键盘对焦时，输入不移动。有什么想法吗？
输入停留在一个固定的位置，我需要把所有的东西放在一个滚动视图中吗？
更新:我使用嵌套导航器，父组件上的样式会阻止这种工作吗？
<KeyboardAvoidingView behavior="padding" style={{ flex: 1 }}>
<TextInput placeholder="input1" />
<TextInput placeholder="input
浏览 1提问于2020-11-26得票数 0
回答已采纳
我写的代码是这样的： <View style={{flex:1}}>
<ScrollView style={{flex:1, backgroundColor='#ffffff'}}>
<TextInput style={styles.inputText}
value={this.state.mail}
placeholder="Email"
onChangeText={(text)=>t
浏览 43提问于2021-08-08得票数 0
回答已采纳
2回答
我正在创建聊天UI，在react本机中，我希望第一部分(其中显示消息)应该是可滚动的。
TextInput应该在屏幕底部，键盘应该在它后面。
UI类似于WhatsApp聊天屏幕。但我不能重新创建那个UI。
我也尝试过来自react-native的react-native，但它不像它那样对我起作用。
App.js
import React, { useEffect, useState } from "react";
import {
ScrollView,
View,
Text,
Alert,
Dimensions,
Platform,
Keyboar
浏览 0提问于2020-05-26得票数 1
回答已采纳
屏幕被包装在KeyboardAvoidingView和ScrollView组件中。最后的一些输入被键盘部分隐藏。如果我将behaviour支柱设置为任何东西，但未定义的一个白色元素出现在键盘之后。我想要做的就是让屏幕向下滚动大约20个像素.我觉得到目前为止，我已经尝试了所有的东西，甚至设置了keyboardVerticalOffset道具，但是似乎没有什么效果。如果补偿是透明的，那就太完美了.
在下面的代码中，View component被传递给children支柱
import { FunctionComponent, ReactNode } from 'react';
im
浏览 7提问于2022-09-10得票数 1
回答已采纳
我试图构建一个简单的应用程序，我可以将人添加到一个party.How中，我可以通过一个单独的文本输入&按钮来实现这一点，这样我就可以在用户数组中添加一个人，这个用户数组就在party对象中。我在某种程度上做到了这一点，但我使它像在同一个按钮中添加的一方，所以我只能添加一个用户到它。会感谢你的建议和帮助吗？
import React, { useState } from "react";
import {
Platform,
KeyboardAvoidingView,
StyleSheet,
Text,
View,
TextInput,
Tou
浏览 6提问于2022-11-12得票数 0
2回答
我的应用程序中的Overlay组件上有一个TextInput。当键盘打开时，包括TextInput在内的半个屏幕都会被覆盖。我确实尝试过KeyboardAvoidingView组件，但无法使TextInput完全可见。我需要一些建议，当键盘在react-native中启用时，如何在覆盖中移动组件
浏览 0提问于2019-06-27得票数 1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
云直播活动推荐
腾讯云开发者
