升级Expo后子类化React Native组件失效，如何恢复子类化使用模式

报错原因 #

你遇到的报错是因为新版React Native中的TouchableHighlight已经重构为函数组件，而ES6类的extends关键字只能继承类或构造函数，无法继承函数组件，因此子类化模式直接失效。

解决方案 #

React官方长期推荐「组合优于继承」的组件复用逻辑，你要实现统一修改activeOpacity默认值的需求，用组件组合封装即可实现，不需要依赖继承：

import React from 'react';
import { TouchableHighlight } from 'react-native';

// 自定义Touchable组件，透传所有属性，统一设置默认属性
const Touchable = (props) => {
  return <TouchableHighlight {...props} />
}

Touchable.defaultProps = {
  activeOpacity: 0.3
}

export default Touchable;

如果原来的子类中有自定义生命周期、实例方法等逻辑，可将对应逻辑迁移到自定义组件中，函数组件使用Hooks即可实现原来类组件的所有生命周期能力。

关于是否能恢复子类化模式 #

函数组件本身不支持类继承机制，且React官方从未推荐过继承内置组件的开发模式，没有兼容方案可以直接恢复原来的子类化写法，建议直接迁移到组合模式即可，改造成本极低。

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