React Native - 设置 secureTextEntry 时无法更改字体 [英] React Native - unable to change font when secureTextEntry is set

问题描述

const entryInput = forwardRef((props, ref) => {
return (
    <View
        style={{
            fontFamily: "roboto-regular",
            color: "rgba(255,0,0,0.6)",
            fontSize: hp("1.5%")
        }}>
        <Text style={styles.text}>{props.show_err ? props.err : null}</Text>
        <TextInput
            ref={ref}
            style={{
                borderColor:
                    !props.err || props.err === "" || props.err === props.empty_err
                        ? "gray"
                        : "rgba(255,0,0,0.6)",
                backgroundColor: "rgba(213, 213, 213, 0.1)",
                borderWidth: wp("0.3%"),
                borderRadius: wp("1%"),
                width: wp("85%"),
                height: hp("5.2%"),
                fontFamily: "roboto-regular",
                fontSize: hp("2%"),
                fontWeight: "normal"
            }}
            returnKeyType={props.last ? "done" : "next"}
            blurOnSubmit={props.last ? true : false}
            placeholderTextColor={"gray"}
            paddingLeft={wp("2%")}
            paddingRight={hp("2%")}
            placeholder={props.placeholder}
            onSubmitEditing={() => {
                if (props.next_input) {
                    props.next_input.current.focus();
                } else if (props.action) {
                    props.action();
                }
            }}
            onChangeText={(text) => {
                if (props.setText) props.setText(text);
                if (props.validate) props.validate(text);
            }}
        />
    </View>
);});

本机反应的新手...尝试为密码创建输入字段.

New to react native... trying to create an input field for a password.

这个自定义组件效果很好，但是当我添加 secureTextEntry={true} 时，字体会无缘无故改变(它不是机器人常规的)，它甚至不会更改为默认字体.

This custom component works great, but when I add the secureTextEntry={true} the font changes for no reason (it's not roboto-regular), it doesn't even change to the default font.

我注意到，当我从样式对象中删除 fontFamily 键然后保存我的代码并重新加载博览会客户端时，然后再次添加 fontFamily 并再次重新加载 TextInput 的行为如预期，字体是我设置的字体(roboto-regular)，但是在手动重新加载应用程序时该错误再次出现.

I noticed that when I remove the fontFamily key from the style object then save my code and the expo client reloads, then add fontFamily again and reload again the TextInput behaves as expected and the font is the one I set (roboto-regular), however the bug reappears when manually reloading the app.

推荐答案

将以下内容添加到我的自定义组件解决了该问题:

Adding the following to my custom component fixed the problem:

    useEffect(() => {
    if (ref) {
        ref.current.setNativeProps({
            style: { fontFamily: "roboto-regular" }
        });
    }
}, []);

这篇关于React Native - 设置 secureTextEntry 时无法更改字体的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！