在react native中动态更改borderWidth不起作用

Question

这是我的代码：

const [focus1, setFocus1] = useState(false);
<TextInput
style={{
...styles.input_container,
borderColor: `${focus1 ? colors.darkPurple : "#b8b8b850"}`,
borderWidth: `${focus1 ? 3 : 1}`,
}}
placeholder="Enter Username"
placeholderTextColor={colors.lightGray}
onFocus={() => setFocus1(true)}
onBlur={() => setFocus1(false)}
/>

加载屏幕时应用程序崩溃。如何动态更改borderWidht？

Answer 1

崩溃可能是因为您给出了错误的样式。样式中的回溯标记将导致指定的值被引用两次。边框颜色将解析为此`

`"#b8b8b850"'

而它应该只被引用一次。边界宽度将被分解为

`3`

而该值应该是整数而不是字符串。

这样试试吧。

<TextInput
style={[
styles.input_container,
borderColor: focus1 ? colors.darkPurple : "#b8b8b850",
borderWidth: focus1 ? 3 : 1,
]}
placeholder="Enter Username"
placeholderTextColor={colors.lightGray}
onFocus={() => setFocus1(true)}
onBlur={() => setFocus1(false)}
/>

Answer 2

borderWidth应该是一个数字，请参阅https://reactnative.dev/docs/view-style-props#borderwidth

所以你应该写borderWidth: focus1 ? 3 : 1