反应本机文本输入多行没有被键盘向上推

Posted 2023-04-18

【中文标题】反应本机文本输入多行没有被键盘向上推

【英文标题】：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中打开，所以我猜它还没有解决。