Question

我有一个带MultiLine的TextInput为true。然而，在两行之后，文本消失在键盘后面。我尝试在KeyboardAvoidingView中包装TextInput，但它不起作用。

当我对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>

Answer 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>

Answer 2

好的，我终于用＆＃34; KeyboardAvoidingView＆＃34;解决了它。我做了两件事。首先，我删除了TextInput上的高度，然后在＆＃34; KeyboardAvoidingView＆＃34;上设置了行为属性。 to＆＃34; padding＆＃34;。对我来说完美的作品。如果有这个帮助，请告诉我！：）

Answer 3

这个答案可能有点晚了。但是，我找到了一种不使用 KeyboardAvoidingView 组件的解决方法。可以使用 ScrollView 来代替将多行 TextInput 滚动到顶部以具有“避免键盘”的效果。在使用 measure() 方法将 TextInput 直接滚动到屏幕顶部之前，我会使用 ref scrollTo() 方法获取 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 个答案: