如何解决如何在 textinput 的占位符中给出多种颜色反应原生
在反应原生文本输入占位符中,有没有办法为占位符文本提供多种颜色。 电子邮件[黑色] 星号[红色]
我尝试过文本输入的 placeholdertextcolor 属性。但它只允许整个占位符文本使用一种颜色。
链接中的图片是我需要的文本输入界面。
解决方法
您可以将自己的占位符组件包装在 TextInput 组件中。它看起来与此类似
<TextInput
value={value}
isFocused={isFocused}
onFocus={() =>
this.setState({ isFocused: true },() => onFocus && onFocus())
}
onBlur={() => this.setState({ isFocused: false })}
>
{!isFocused && !value && (
<Text>
Placeholder Text<Text style={{ color: 'red' }}>*</Text>
</Text>
)}
</TextInput>
确保跟踪输入组件的焦点状态,以便您可以显示占位符或否。
,如上一条评论中所述,您可以添加自定义占位符, 您还可以将其传递给状态并在使用 onResponderStart 按下文本输入时将其清除,这是完整示例:
const example = () => {
const [placeHolderText,setPlaceHolderText] = React.useState('PlaceHolder');
const [placeHolderOtherText,setPlaceHolderOtherText] = React.useState('*');
return (
<View style={{flex: 1,alignContent: 'center',justifyContent: 'center'}}>
<TextInput
//remove placeholder on touching
onResponderStart={() => {
setPlaceHolderOtherText('');
setPlaceHolderText('');
}}>
<Text>
{placeHolderText}
<Text style={{color: 'red'}}>{placeHolderOtherText}</Text>
</Text>
</TextInput>
</View>
);
};
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。