反应本机文本输入多行没有被键盘向上推
Posted
技术标签:
【中文标题】反应本机文本输入多行没有被键盘向上推【英文标题】:React native textinput multiline is not being pushed up by keyboard 【发布时间】:2018-05-08 14:51:20 【问题描述】:我有一个 multiLine 为 true 的 TextInput。但是,在两行之后,文本消失在键盘后面。我曾尝试将 TextInput 包装在 KeyboardAvoidingView 中,但它不起作用。
当我取消对 TextInput 的焦点然后单击底线时,键盘确实会向上推 TextInput。知道如何让 TextInput 的最后一行留在键盘上吗?
代码:
<View style=styles.descriptionFlexStyle>
<Text
style=[
styles.headerTextStyle,
marginTop: Window.height * 0.04
]> Please fill in a reason </Text>
<ScrollView>
<TextInput
style=styles.reasonTextInput
placeholder="Reason"
value=reasonText
multiline=true
onChangeText=input =>
this.setState(
reasonText: input
)
underlineColorandroid="transparent"
ref="reasonTextInput"
/>
</ScrollView>
</View>
【问题讨论】:
你是在ios还是android上测试?你的 TextInput 高度有限制吗?我根据用户可以在多行 TextInput 中输入的最大字符数来设置文本输入高度。 我正在测试两者。高度没有设置,它只是在新行上增加。我总是可以将它设置为最大高度,是的,但这不是我想要的。我希望键盘避免视图工作 【参考方案1】:你好,亲爱的,你必须使用来自 React-Native 的 KeyboardAvoidingView
组件,并对其进行如下行为:
<KeyboardAvoidingView behavior='postion' || 'height' || 'padding'>
<View style=styles.descriptionFlexStyle>
<Text
style=[
styles.headerTextStyle,
marginTop: Window.height * 0.04
]> Please fill in a reason </Text>
<ScrollView>
<TextInput
style=styles.reasonTextInput
placeholder="Reason"
value=reasonText
multiline=true
onChangeText=input =>
this.setState(
reasonText: input
)
underlineColorAndroid="transparent"
ref="reasonTextInput"
/>
</ScrollView>
</View>
</KeyboardAvoidingView>
【讨论】:
正如我在问题中所说,我已经尝试过 KeyboardAvoidingView 的行为,但它不起作用。如果我开始在文本输入中书写,前 2 行将停留在键盘上方,但第三行等将在键盘后面。问题实际上是 KeyboardAvoidingView 不适用于多行 link 这里前三行位于键盘上方。 link 超过三行在键盘下方。 link 如果我不聚焦键盘并单击底线,则 textinput 会再次向上推。但我需要它来推动屏幕而不是分散注意力并再次关注每条新线 @Malu123 我也有同样的问题。它是 React-Native 中的一个错误:github.com/facebook/react-native/issues/16826 希望这里有人可以解决这个问题。 @Malu123 我解决了它...我在 TextInput 上设置了一个高度。我删除了高度,KeyboardAvoidingView 现在正在工作,但它一次只能移动半行......但它现在正在移动! @Malu123 试试keyboardVerticalOffset=some_number
看看是否有帮助。【参考方案2】:
这个答案可能有点晚了。但是,我找到了一种不使用 KeyboardAvoidingView
组件的解决方法。 ScrollView
可用于将多行 TextInput
滚动到顶部以获得“键盘避免”效果。在使用scrollTo()
方法将TextInput
直接滚动到屏幕顶部之前,我会使用ref measure()
方法获取TextInput
的顶部y 值,从而有效地避开键盘。
import React, useRef from "react";
import ScrollView, TextInput, View from "react-native";
export default function Test()
const scrollViewRef = useRef(null);
const viewRef = useRef(null);
const handleFocus = () =>
viewRef.current.measure((x, y) =>
scrollViewRef.current.scrollTo( x: 0, y );
);
;
return (
<ScrollView ref=scrollViewRef>
/* View to fill up space */
<View
style=
width: "80%",
height: 600,
/>
<View ref=viewRef>
<TextInput
onFocus=handleFocus
multiline=true
style=
width: "80%",
height: 100,
backgroundColor: "whitesmoke",
alignSelf: "center",
/>
/* View to fill up space */
<View
style=
width: "80%",
height: 600,
/>
</View>
</ScrollView>
);
【讨论】:
【参考方案3】:好的,我终于使用“KeyboardAvoidingView”解决了它。我做了两件事。首先,我删除了 TextInput 上的高度,然后将“KeyboardAvoidingView”上的行为属性设置为“填充”。现在非常适合我。让我知道这是否有帮助! :)
【讨论】:
我有同样的问题,KeyboardAvoidingView
不起作用,即使没有 height
和 padding
的行为属性。这个问题仍然在github中打开,所以我猜它还没有解决。以上是关于反应本机文本输入多行没有被键盘向上推的主要内容,如果未能解决你的问题,请参考以下文章
在本机反应中单击 TextInput 字段外部时失去焦点并关闭键盘?