带有占位符的自定义 React Native 文本输入

Question

我正在尝试使用 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 }) }
}

Answer 1

因为我不能评论，所以我会在这里回答！

请提供更多信息

{...props}

里面的

TextInput

道具。确保你没有给

value

道具

placeholderText

的价值。