React Native - 设置secureTextEntry时无法更改字体答案

【问题标题】：React Native - unable to change font when secureTextEntry is setReact Native - 设置secureTextEntry时无法更改字体
【发布时间】：2021-01-31 09:49:43
【问题描述】：

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>
);});

React Native 的新手...尝试为密码创建输入字段。

这个自定义组件效果很好，但是当我添加 secureTextEntry={true} 时，字体会无缘无故地发生变化（它不是roboto-regular），它甚至不会更改为默认字体。

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

【问题讨论】：

我面临同样的问题，显然这是 rn 0.63.3 版本中的一个错误。这是 gihub 上的 issue link，我尝试了使用 ref 和 setNativeProps 但对我不起作用的解决方案。

标签： react-native

【解决方案1】：

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

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

【讨论】：

这并不能解决问题，有时它根本不加载占位符。你以前遇到过这个问题吗？
@GeekDev 请检查我的另一个答案，应该可以。

【解决方案2】：

接受的答案将取决于运气。在挂载组件时，可以定义或未定义 refs。

将以下内容添加到您的组件中以正确解决问题：

  const _inputRef = useRef(null);
  const setRef = useCallback((node) => {
    if (_inputRef.current) {
      // Make sure to cleanup any events/references added to the last instance
    }
    if (node) {
      // Check if a node is actually passed. Otherwise node would be null.
      // You can now do what you need to, setNativeProps, addEventListeners, measure, etc.
      node.setNativeProps({
        style: { fontFamily: "Quicksand-Medium" },
      });
    }
    // Save a reference to the node
    _inputRef.current = node;
  }, []);

确保您的 TextInput 已分配此 ref：

    <TextInput ref={setRef} ... />

【讨论】：