简体   繁体   English

React Native - 文本输入 - 长文本输入,cursor 没有 go 开头后点击回车键类型

[英]React Native - Text Input - Long text input, cursor doesn't go at the beginning after clicking the return key type

I have this simple Text Input but the problem is that on Android Devices, when the user has written a long text, the cursor doesn't go automatically in the beginning of the field but it stays in the end.我有这个简单的文本输入,但问题是在 Android 设备上,当用户写了长文本时,cursor 不会 go 自动留在字段的开头。 How can I fix this?我怎样才能解决这个问题?

       <TextInput
            key={currencyTypeId}
            ref={forwardRef}
            style={styles.input}
            onChangeText={onChangeText}
            value={inputValue}
            editable={editable}
            autoCorrect={false}
            autoCompleteType='off'
            returnKeyType={returnKeyType}
            placeholder={placeholder}
            placeholderTextColor={placeholderColor}
            keyboardType={keyboardType}
          />

As it turns out there was no solution for this for andorid devices.事实证明,对于 andorid 设备没有解决方案。 I managed to find another solution by using this property onContentSizeChange and defining a state for input height so the text could break in more than 1 line.我设法通过使用此属性onContentSizeChange并为输入高度定义 state 找到了另一个解决方案,因此文本可能会中断超过 1 行。

const [height, setHeight] = useState();

Add this to TextInput component将此添加到 TextInput 组件

onContentSizeChange={({
                  nativeEvent: {
                    contentSize: { height: newHeight },
                  },
                }) => {
                  setHeight(newHeight);
                }}

If you have a problem with the height style in the text input styles, pass the height as condition to the styles and define the height styles you want based on it.如果您对文本输入 styles 中的高度样式有问题,请将高度作为条件传递给 styles 并根据它定义您想要的高度 styles。

Example:例子:

 style={[
              styles.input,
              inputValue ? (inputValue.length > 30 ? { height: heightInput } : { height: '10%'}) : null,
              
            ]}

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 反应原生文本输入模糊/焦点问题 - React native text input blur/focus issue 反应文本输入的本地国家代码前缀 - react native country code prefix for text input 在文本输入中反应本机用户标签 - React native user tags inside text input React Native - useState - 在我从输入中删除所有文本后,文本输入字段未清除 state 中的第一个字符 - React Native - useState - Text Input field is not clearing the first character from state after I delete all text from input React Native - 文本输入,允许用户输入输入,但也可以在开始输入后从选项列表中选择输入 - React Native - Text Input that allows user to enter input but also choose input from a list of options after he start typing 在响应本机文本输入的 onChange function 上获取属性“值”在类型“数字”.ts(2339) 上不存在 - getting Property 'value' does not exist on type 'number'.ts(2339) on onChange function of react native text input angular 移位输入字段 cursor 在输入 4 位数字后开始 - angular shift input field cursor at beginning after 4 digits typed 使用 Typescript 与 useRef 反应本机文本输入焦点 - React Native Text Input focus with useRef using Typescript 为什么 React 文本输入在每次击键后都会失去焦点? - Why does React text input lose focus after each keystroke? 在输入文字类型的表单控件中插入文字 - Insert text in a form control of type input text
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM