时间戳

首页 > 解决方案 > React Native如何改变secureTextEntry输入的大小和颜色

javascript - React Native如何改变secureTextEntry输入的大小和颜色

问题描述

所以我有一个密码输入，如下所示：

<TextInput
   name="Password"
   type="password"
   mode="outline"
   secureTextEntry={true}
   style={styles.inputStyle}
   autoCapitalize="none"
   autoFocus={true}       
/>

并将此样式应用于它：

inputStyle { 
   fontSize: 30,
   color: '#333',
   fontWeight: '900'
}

但似乎这些样式实际上并未应用于输入。但是，一旦我删除了secureTextEntry={true}道具，它就会生效。所以我猜密码芭蕾舞的造型有点不同，知道我怎么能做到吗？

标签： javascriptreactjscssreact-nativereact-native-textinput

解决方案

因此，对于颜色，我使用textColor了可以正常工作的道具，并且由于某些原因，当我们按样式传递 fontSize 时并没有真正覆盖默认值，所以我做了什么来解决这个问题，我定义了一个 fontSize 道具：

export interface TextInputContainerProps {
    ... // Some other props
    fontSize?: number;
}

然后将其传递给TextInput组件：

<TextInput {...props} style={[...props.style, { fontSize }]}
    editable={editable} />

推荐阅读