如何在 React Native TextInput 占位符中添加红色星号？

Question

在 TextInput 中，我希望在灰色的占位符文本后有一个红色星号。

<TextInput
      keyboardType="numeric"
      placeholder={t('Enter OTP')}
      placeholderTextColor="#C4C4C4"
      value={inputOTP}
      onChangeText={text => setInputOTP(text)}
      style={styles.textInput}
/>

我想要 EnterOTP 中 P 旁边的红色星号。绝对位置是唯一的方法吗？

Answer 1

TextInput 自然不支持您提到的行为 （具有多种颜色的占位符） 但是通过一个小技巧您将能够实现你想要的！

输入带有红色星号的文本

<Text style={{ color: 'red' }}>* * *</Text>

尝试给它一个位置，使其在占位符中位于您的 OTP 文本旁边。在 TextInput 组件中，我们有 onFocus 道具，当您输入文本输入并想要输入时，这些道具将被触发！所以在这里你可以使提到的文本成为条件！当它没有焦点并且里面没有字符时你会显示红色星号文本否则你不会显示它。

Answer 2

没有直接的方法this.What我做的是在 TextInput 前面添加带有星号的文本，并在 TextInput 中是否有值时有条件地显示隐藏，

    const [title, setTitle] = useState();
    const {
     control,
     handleSubmit,
     formState: {errors},
    } = useForm({});

    <View style={{flexDirection: 'row',}}>
          <Controller
            control={control}
            rules={{
              required: true,
            }}
            render={({field: {onChange, onBlur, value}}) => (
              <TextInput
                autoFocus
                onChangeText={(val) => {
                  onChange(val);
                  setTitle(val);
                }}
                value={value}
                onBlur={onBlur}
                placeholder={'Type activity name here'} >
              </TextInput>
            )}
            name="activityName"
          />
          {title ? <Text></Text> : <Text style={{color: 'red',fontSize: 17,height: 13,}}>*</Text>}
        </View>

这里的Controller来自react-hook-forms，与此无关question.You也可以使用TextInput而不用Controller。

如何在 React Native TextInput 占位符中添加红色星号？

How to add red asterisk in react native TextInput placeholder?

react-native

react-native-textinput