描述
当在 TextInput 字段中设置一个 placeholder 时，VoiceOver 会读取占位符文本。这会导致在提供 accessibilityLabel 时出现问题。预期行为：屏幕阅读器不应读取占位符，因为它只是一个视觉组件。
重现步骤
尝试以下示例代码：
import React from 'react';
import {SafeAreaView, StyleSheet, TextInput} from 'react-native';
const TextInputExample = () => {
const [text, onChangeText] = React.useState('');
return (
<SafeAreaView>
<TextInput
placeholder="text input"
accessibilityLabel="text input"
style={styles.input}
onChangeText={onChangeText}
value={text}
/>
</SafeAreaView>
);
};
const styles = StyleSheet.create({
input: {
height: 40,
margin: 12,
borderWidth: 1,
padding: 10,
},
});
export default TextInputExample;React Native 版本
0.74.0
受影响的平台
运行时 - iOS
npx react-native info 的输出
n/a堆栈跟踪或日志
n/a重现者
https://snack.expo.dev/eiduCgHeg-d8A6PLexqp2
截图和视频
4条答案
按热度按时间mitkmikd1#
qoefvg9y2#
我可以处理这个问题吗？
mepcadol3#
是的，请。
b4qexyjb4#
你好，@prateekgarcha ,我想我可能能帮助你解决这个问题。
首先，在iOS原生开发中，VoiceOver默认会读取UITextField的占位符值。这是预期的行为。
其次，也许你不需要在输入框中添加
accessibilityLabel="text input"。系统会自动将这个组件宣布为“文本框”，这与你的“文本输入”略有不同，但目的相同。最后，如果你想阻止占位符值被读出，我可以提供一个解决方法。在我的方法中，我会：
TextField大小相同的TouchableOpacity,Text组件嵌套在TouchableOpacity中，并将其设置为显示你希望显示的占位符值，然后使用accessibilityElementsHidden={true}确保这个值不可读，TouchableOpacity时，进入编辑状态并隐藏TouchableOpacity。当用户退出编辑状态时，如果文本框为空，再次显示TouchableOpacity以模拟占位符类似的效果。我不确定这是否是一个好的实现方法，但我在iPhone 12和iOS 16.1上成功测试了它。希望这对你有所帮助。
这是我的代码： https://snack.expo.dev/@ziggear/expo-snack-for-prateekgarcha?platform=ios