代码之家 › 专栏 › 技术社区 › Malu123

React native textinput multiline未被键盘上推

textinput keyboard react-native

Malu123 · 技术社区 · 7 年前

我有一个多行true的TextInput。然而,在两行之后,文本消失在键盘后面。我曾尝试在KeyboardAvoidingView中包装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>

3 回复 | 直到 7 年前

shahabvshahabi 7 年前

你好,亲爱的,你一定要用 KeyboardAvoidingView 来自React Native的组件,并在其上设置如下行为:

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

Jarrett Goh XZ 4 年前

这个答案可能有点晚了。但是,我发现了一种不使用 KeyboardAvoidingView 组成部分A. ScrollView 可以用于滚动多行 TextInput 到顶部有“键盘避免”的效果。我会使用参考号 measure() 文本输入框 ,然后再使用 scrollTo() 方法滚动 文本输入框

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>
 );
}

-2

ShaneG 7 年前

好的,我终于用“KeyboardAvoidingView”解决了这个问题。我做了两件事。首先,我删除了TextInput上的高度,然后将“KeyboardAvoidingView”上的行为属性设置为“padding”。现在非常适合我。如果有帮助,请告诉我!:)