React Native函数组件defaultProps移除警告的解决方法

React 18.3.1（及你使用的react-native@0.75.1）已明确会在未来移除函数组件对defaultProps的支持，官方推荐用JavaScript默认参数替代，具体操作如下：

基础替换方法 #

旧写法（触发警告） #

const Page = ({ title, content }) => {
  return (
    <View>
      <Text>{title}</Text>
      <Text>{content}</Text>
    </View>
  );
};

// 这部分就是触发警告的原因
Page.defaultProps = {
  title: '默认页面标题',
  content: '默认页面内容'
};

export default Page;

新写法（消除警告） #

直接在组件的参数解构中设置默认值：

const Page = ({ 
  title = '默认页面标题', 
  content = '默认页面内容' 
}) => {
  return (
    <View>
      <Text>{title}</Text>
      <Text>{content}</Text>
    </View>
  );
};

export default Page;

嵌套属性的处理 #

如果你的props包含嵌套对象，原来用defaultProps处理的方式也可以换成默认参数：

旧写法 #

const Page = ({ user }) => {
  return <Text>当前用户：{user.nickname}</Text>;
};

Page.defaultProps = {
  user: { nickname: '匿名用户' }
};

新写法 #

const Page = ({ user = { nickname: '匿名用户' } }) => {
  return <Text>当前用户：{user.nickname}</Text>;
};

如果需要兼容user被显式传为null或undefined的场景，可以进一步优化：

const Page = ({ user }) => {
  const nickname = user?.nickname || '匿名用户';
  return <Text>当前用户：{nickname}</Text>;
};

注意事项 #

• 这种替换完全适配react@18.3.1和react-native@0.75.1版本，不会影响原有功能
• JavaScript默认参数是语言原生特性，代码更简洁，也避免了未来版本的兼容性问题

内容的提问来源于stack exchange，提问作者Engr.Aftab Ufaq