提问人：Zephyr 提问时间：4/28/2023 最后编辑：Zephyr 更新时间：5/2/2023 访问量：103
带占位符的自定义 React Native 文本输入
Custom React Native text input with placeholder
问：
我正在尝试用 2 种颜色设置我的 TextInput 占位符的样式，因此我按以下方式进行了设置。
<TextInput
{ ...props }
style={[styles.textBox]}
>
{!value && required &&
<Text style={{ color: placeholderTextColor }}>
<Text style={{ color: 'red' }}>*</Text>
{placeholderText}
</Text>
}
</TextInput>
在大多数情况下，这看起来不错，但存在一些问题。
光标位于 placehoderText 的末尾。当我输入某些内容时，它会附加到占位符文本中。
如何阻止 TextInput 中的 Text 元素成为活动实体？
编辑 发送的道具是
{
placeholder={'Enter here'}
placeholderTextColor={'gray'}
autoCapitalize = 'sentences'
value={firstName}
maxLength= {15}
required={true}
returnKeyType="next"
onSubmitEditing={() => this._next ('lastName')}
onChangeText={(firstName) => updateFirstName ({ firstName }) }
}
答：
0赞
oussamaZAAM
4/28/2023
#1
既然我不能评论，我就在这里回答吧！
请提供更多关于道具内部的信息。确保你没有给道具 值 。{...props}TextInputvalueplaceholderText
评论
0赞
Zephyr
4/28/2023
我已经更新了帖子以添加正在发送的道具
0赞
Fotios Tsakiris
4/29/2023
#2
您在 中使用的元素不是 .它是呈现在 上的实际文本，这就是光标出现在 的末尾的原因。TextTextInputplaceholderTextInputplaceholderText
使用 的占位符 prop 设置文本，使用 prop 设置占位符文本的颜色。然后，您可以使用样式道具来应用任何其他样式TextInputplaceholderplaceholderTextColor
下面是代码的更新版本：
<TextInput
{ ...props }
style={[styles.textBox]}
placeholderTextColor={placeholderTextColor}
placeholder={required ? * ${placeholderText} : placeholderText}
/>
如果你想为占位符文本的不同部分使用不同的颜色，你可以使用一个自定义组件作为占位符属性的值，如下所示：
const Placeholder = ({required, placeholderText}) => (
<Text>
{required && <Text style={{color: 'red'}}>*</Text>}
<Text style={{color: 'gray'}}>{placeholderText}</Text>
</Text>
);
<TextInput
{...props}
style={styles.textBox}
placeholder={<Placeholder required={required} placeholderText={placeholderText} />}
/>
评论
0赞
Zephyr
4/30/2023
在我的预期输出中，我需要占位符具有多种颜色。但是使用此解决方案，placeholderTextColor 将用一种颜色固定所有占位符。除非我误解了什么。
0赞
Fotios Tsakiris
5/2/2023
请查看上面的第二个解决方案
评论