React Native中实现Otp输入框按填充状态切换边框颜色的技术问询

需求：OTP输入框填充内容时边框为白色，为空时边框为灰色。

当前实现代码如下：

组件逻辑代码 #

const otpFilled = !input
  ? styles.underlineStyleBase
  : styles.underlineStyleHighLighted;

<OtpInputs
  numberOfInputs={pinCount}
  defaultValue={input}
  handleChange={handleTextChange}
  inputStyles={styles.input}
  keyboardType="phone-pad"
  keyboardAppearance="dark"
  inputContainerStyles={[styles.underlineStyleBase, otpFilled]}
  focusStyles={styles.underlineStyleHighLighted}
  secureTextEntry={secureText}
  autofillFromClipboard={false}
  autoFocus={true}
  selectionColor={colors.brand_white}
  onBlur={handleOnBlur}
/>

样式代码 #

underlineStyleBase: {
  borderRadius: 12,
  height: 48,
  width: 48,
  borderColor: grey,
  borderWidth: 1,
  justifyContent: 'center',
  alignItems: 'center',
},
underlineStyleHighLighted: {
  borderColor: 'white',
},

内容的提问来源于stack exchange，提问作者Kumar Shivam