React Native中TextInput重渲染时样式不更新问题排查

问题重现 #

你希望通过状态控制TextInput聚焦时显示红色边框，已正确触发focus/blur事件且组件重渲染，但红色边框未生效，代码如下：

import React from "react";
import { useState } from "react";
import { Text, View, TextInput } from "react-native";

function App() {
  console.log("rendering...");

  const [focused, setFocused] = useState(false);

  const inputStyles = [
    {
      maxWidth: 100,
      borderColor: "black",
      borderWidth: 1
    },
    focused && { borderColor: "red" }
  ];

  const handleFocus = () => {
    console.log("focusing");
    setFocused(true);
  };

  const handleBlur = () => {
    console.log("unfocusing");
    setFocused(false);
  };

  return (
    <View style={{ paddingTop: 10, paddingLeft: 10 }}>
      <Text style={{ marginBottom: 8 }}>Type something below</Text>
      <TextInput
        value="Hello"
        style={inputStyles}
        onFocus={handleFocus}
        onBlur={handleBlur}
      />
    </View>
  );
}

export default App;

原因分析 #

1. 默认聚焦样式覆盖自定义边框：React Native（尤其是Web端）的TextInput会继承浏览器原生input的:focus样式（比如蓝色轮廓线），这个默认样式层级更高，会遮盖你设置的borderColor。
2. 样式数组的潜在歧义：虽然React Native会自动过滤样式数组中的假值（比如focused && ...在focused为false时返回false，会被忽略），但这种写法不如直接合并样式对象直观，容易引发意外。

解决方案 #

• 禁用浏览器默认的聚焦轮廓，添加outlineWidth: 0（或Web端的outline: 'none'）来让自定义边框显示。
• 直接合并样式对象，用条件判断设置borderColor，避免数组样式的歧义。

修改后的代码 #

import React from "react";
import { useState } from "react";
import { Text, View, TextInput } from "react-native";

function App() {
  console.log("rendering...");

  const [focused, setFocused] = useState(false);

  // 直接合并为单个样式对象，逻辑更清晰
  const inputStyles = {
    maxWidth: 100,
    borderColor: focused ? "red" : "black",
    borderWidth: 1,
    // 禁用默认聚焦轮廓，确保自定义边框生效
    outlineWidth: 0
  };

  const handleFocus = () => {
    console.log("focusing");
    setFocused(true);
  };

  const handleBlur = () => {
    console.log("unfocusing");
    setFocused(false);
  };

  return (
    <View style={{ paddingTop: 10, paddingLeft: 10 }}>
      <Text style={{ marginBottom: 8 }}>Type something below</Text>
      <TextInput
        value="Hello"
        style={inputStyles}
        onFocus={handleFocus}
        onBlur={handleBlur}
      />
    </View>
  );
}

export default App;

若坚持使用数组样式的调整方案 #

const inputStyles = [
  {
    maxWidth: 100,
    borderColor: "black",
    borderWidth: 1,
    // 必须添加这行禁用默认轮廓
    outlineWidth: 0
  },
  focused && { borderColor: "red" }
];

内容的提问来源于stack exchange，提问作者Allan Juan