描述
在React Native升级之前,'selection'属性用于将光标设置为指定位置。这对于只读输入、预填充输入甚至正在填充数据的输入都是有效的。
在React Native升级到v0.73之后,它仅在数据正在填充的情况下有效,而在TextInput为只读或具有一些预填充数据时无效。
我们的实现:
我们使用状态变量在{start:0}和'null'之间切换选择。当输入获得焦点时,将选择设置为null,当输入失去焦点时,将选择更改为0。我们这样做是为了始终从起始位置显示输入数据(在Android中,默认情况下,这种行为不起作用,输入显示从末尾开始的数据)。
const [value, onChangeText] = React.useState(
'This is a prefilled text inside this TextInput. Add more contents and check the selection prop',
);
const [selection, setSelection] = useState(
Platform.OS === 'android' ? {start: 0} : null,
);
const handleOnFocus = () => {
if (Platform.OS === 'android') {
setSelection(null);
}
};
const handleOnBlur = () => {
if (Platform.OS === 'android') {
setSelection({start: 0});
}
};
<SafeAreaView>
<ScrollView>
<View style={styles?.container}>
<Text>{'Text Input with prefilled data'}</Text>
<TextInput
onChangeText={text => onChangeText(text)}
value={value}
style={{
padding: 10,
width: 300,
borderStartWidth: 1,
borderEndWidth: 1,
borderTopWidth: 1,
boderLeftWidth: 1,
borderRightWidth: 1,
borderBottomWidth: 1,
marginBottom: 10,
borderRadius: 10,
}}
placeholder="Enter long text here..."
selection={selection}
onFocus={handleOnFocus}
onBlur={handleOnBlur}
/>
<Text>{'Text Input with readOnly data'}</Text>
<TextInput
onChangeText={text => onChangeText(text)}
value={value}
readOnly
style={{
padding: 10,
width: 300,
borderStartWidth: 1,
borderEndWidth: 1,
borderTopWidth: 1,
boderLeftWidth: 1,
borderRightWidth: 1,
borderBottomWidth: 1,
marginBottom: 10,
borderRadius: 10,
backgroundColor: '#f2f2f2',
}}
placeholder="Enter long text here..."
selection={selection}
onFocus={handleOnFocus}
onBlur={handleOnBlur}
/>
<Text>{'Change input focus here'}</Text>
<TextInput
placeholder="Use this to change focus"
style={{
padding: 10,
width: 300,
borderStartWidth: 1,
borderEndWidth: 1,
borderTopWidth: 1,
boderLeftWidth: 1,
borderRightWidth: 1,
borderBottomWidth: 1,
borderRadius: 10,
}}
/>
</View>
</ScrollView>
</SafeAreaView>```
**Note: This issue is only coming on Android.**
### Steps to reproduce
1. Clone the attached repo and install dependencies `( npm install )`
2. Run the app on Android simulator `( Pixel 6 Pro API 34 )`
3. In the launch page only, you will see 3 inputs. First input has prefilled data, where you can input some characters and remove the focus from this input field, by using the third input. The second input is readOnly, where the expected behavior is to show the input from start. As of now, in Android, it shows from end, when the input is blurred.
`Repo URL: https://github.com/hariomsinha7/bug-react-native-textinput`
### React Native Version
0.73.0
### Affected Platforms
Runtime - Android
### Areas
Fabric - The New Renderer, TurboModule - The New Native Module System, JSI - Javascript Interface, Codegen
### Output of `npx react-native info`
```text
System:
OS: macOS 14.4.1
CPU: (10) arm64 Apple M1 Pro
Memory: 120.02 MB / 16.00 GB
Shell:
version: "5.9"
path: /bin/zsh
Binaries:
Node:
version: 18.17.0
path: ~/.nvm/versions/node/v18.17.0/bin/node
Yarn:
version: 1.22.19
path: /opt/homebrew/bin/yarn
npm:
version: 9.6.7
path: ~/.nvm/versions/node/v18.17.0/bin/npm
Watchman:
version: 2024.04.15.00
path: /opt/homebrew/bin/watchman
堆栈跟踪或日志
NA
可重现问题
https://github.com/hariomsinha7/bug-react-native-textinput
截图和视频
NA
4条答案
按热度按时间oyjwcjzk1#
csbfibhn2#
在这里也是一样。我已经尝试了几种方法,让光标在失去焦点后返回到开头,使输入值的开头可见,而结尾被截断,而不是相反的情况,这是默认设置。
zujrkrfu3#
@hariomsinha7 ,你能告诉我们升级到73.0之前的React Native版本吗?我觉得我在0.72.7版本中也遇到了同样的问题。
kh212irz4#
在当前代码中发现了问题,并将对此进行修复。