React Native（Native Base）修改浮动标签颜色点击报错问题咨询

我之前在使用Native Base开发React Native项目时也碰到过一模一样的报错，给你梳理下原因和解决办法：

报错原因分析 #

你应该是错误地把样式属性直接传给了label参数（这个参数本来是用来放标签文本的），比如类似这样的写法：

// 错误示例
<FloatingLabel label={{ color: '#ffffff', children: '你的标签' }} />

Native Base的FloatingLabel组件内部在处理聚焦状态时，会用Object.assign合并样式，但它期望接收的是标准的样式对象，而你这种把文本和样式混传的方式，导致组件拿到了非预期的参数，触发了iOS环境下的性能优化限制报错（就是你看到的那个TypeError）。

正确修改标签颜色的方法 #

推荐两种靠谱的方式，按需选择：

1. 全局主题定制（推荐，适合统一项目样式） #

通过Native Base的extendTheme来全局配置FloatingLabel的默认样式，包括未聚焦和聚焦状态的标签颜色：

import { extendTheme, NativeBaseProvider } from 'native-base';

// 定制主题
const customTheme = extendTheme({
  components: {
    FloatingLabel: {
      baseStyle: {
        label: {
          color: '#ffffff', // 未点击时的标签颜色
        },
        _focus: {
          label: {
            color: '#ffffff', // 点击聚焦后的标签颜色，也可以改成你想要的其他色值
          },
        },
      },
    },
  },
});

// 在根组件用NativeBaseProvider包裹整个应用
export default function App() {
  return (
    <NativeBaseProvider theme={customTheme}>
      {/* 你的页面组件都放在这里 */}
    </NativeBaseProvider>
  );
}

2. 单个组件单独配置 #

如果只是某个页面的FloatingLabel需要改颜色，可以直接给组件传labelStyle和_focus伪属性：

import { FloatingLabel } from 'native-base';

// 在页面组件中使用
<FloatingLabel
  label="你的标签文本"
  // 未聚焦时的标签样式
  labelStyle={{ color: '#ffffff' }}
  // 聚焦状态下的标签样式
  _focus={{
    label: {
      color: '#ffffff',
    },
  }}
/>

这样修改后，不管是未点击还是聚焦状态，标签颜色都会正常显示，也不会触发那个iOS模拟器的报错了。

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