React Native能否用useRef设置组件样式？聚焦修改TextInput边框色失败

你在Web React里直接通过ref修改DOM元素style的方式在React Native里行不通，因为React Native的组件ref指向的是原生组件的包装实例，不是浏览器DOM节点，所以没有style属性可以直接赋值修改。

下面是两种可行的实现方案：

方案一：通过State管理（推荐） #

这是React Native中处理动态样式的标准做法，符合React的单向数据流模式：

export const LoginScreen = () => {
    const [name, setName] = useState(null);
    const [isInputFocused, setIsInputFocused] = useState(false);

    return (
        <View>
            <TextInput
                value={name}
                onFocus={() => setIsInputFocused(true)}
                onBlur={() => setIsInputFocused(false)}
                onChangeText={setName}
                style={{
                    flex: 0.05,
                    borderColor: isInputFocused ? 'green' : 'red',
                    borderWidth: 2,
                    borderStyle: 'solid',
                    borderRadius: 5,
                }}
            />
        </View>
    );
};

通过isInputFocused状态控制边框颜色，React会自动根据状态变化重新渲染组件，更新样式。

方案二：使用setNativeProps（特殊场景用） #

如果一定要通过ref操作，可以使用React Native提供的setNativeProps方法直接修改原生组件属性：

export const LoginScreen = () => {
    const [name, setName] = useState(null);
    const nameInputRef = useRef(null);

    return (
        <View>
            <TextInput
                value={name}
                onFocus={() => 
                    nameInputRef.current?.setNativeProps({
                        style: { borderColor: 'green' }
                    })
                }
                onBlur={() => 
                    nameInputRef.current?.setNativeProps({
                        style: { borderColor: 'red' }
                    })
                }
                onChangeText={setName}
                style={{
                    flex: 0.05,
                    borderColor: 'red',
                    borderWidth: 2,
                    borderStyle: 'solid',
                    borderRadius: 5,
                }}
                ref={nameInputRef}
            />
        </View>
    );
};

注意：这种方式会绕过React的状态更新流程，打破单向数据流，仅在需要性能优化等特殊场景下使用，日常开发优先推荐方案一。

内容的提问来源于stack exchange，提问作者Kayode Joseph