Expo/React Native项目TypeError报错求助：react-native-elements按钮使用问题

嘿，我来帮你搞定这个头疼的报错！你遇到的TypeError: 在此环境中，assign的源必须是一个对象，本质是react-native-elements的Button组件在处理icon属性时，内部的Object.assign操作接收到了非对象类型的值，而Expo的性能优化机制又严格检查了这个不符合规范的操作，所以抛出了错误。

问题出在哪？ #

你现在直接把<Icon />这个JSX元素传给了icon属性，但在Expo的环境下，react-native-elements内部对icon的处理逻辑，会把这个JSX元素当成非对象类型来处理，触发了Object.assign的类型校验错误。

解决方案 #

这里有几个靠谱的解决办法，按推荐优先级排序：

1. 改用icon属性的对象配置形式（推荐）

react-native-elements的Button组件本身支持用配置对象来定义icon，这样能完美避开类型问题，让组件内部正确处理。修改后的代码如下：

return (
  <View>
    <Header />
    <Button
      icon={{
        type: "entypo",
        name: "plus"
      }}
      iconRight
      title="Add City"
    />
  </View>
);

2. 若坚持传JSX元素，用component字段包裹

如果你一定要手动传入Icon组件的JSX，可以把它放在icon对象的component字段里，这样内部处理时能识别为合法对象：

return (
  <View>
    <Header />
    <Button
      icon={{
        component: <Icon type="entypo" name="plus" />
      }}
      iconRight
      title="Add City"
    />
  </View>
);

3. 更新react-native-elements到最新稳定版

如果你的组件版本比较旧，可能存在这个兼容性bug。执行下面的命令更新：

# npm用户
npm install react-native-elements@latest

# yarn用户
yarn add react-native-elements@latest

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