React Native中setNativeProps已弃用错误的排查与解决

错误来源判断 #

这个错误不是你的代码导致的，是你使用的第三方库react-native-modal内部仍在调用React Native已废弃的setNativeProps API，而官方现在明确要求用React状态更新props来替代这个方法，所以控制台才会抛出警告。

解决办法 #

• 升级第三方库版本
  优先尝试把react-native-modal更新到最新版，维护者很大概率已经修复了废弃API的使用问题：

  npm install react-native-modal@latest
  # 用yarn的话执行这条
  yarn add react-native-modal@latest
  

• 替换为React Native官方Modal组件
  如果升级后问题依旧，直接改用RN自带的Modal组件即可（你代码里已经导入了官方Modal，只是没启用），修改后的Modal部分代码如下：

  // 先移除第三方Modal的导入：import Modal from "react-native-modal";
  // 直接使用你已导入的官方Modal
  
  <Modal
    visible={isModalVisible}
    transparent={true}
    animationType="fade" // 可选，添加和第三方Modal类似的过渡动画
    onRequestClose={() => toggleModalVisibility()} // Android平台必须添加该属性
  >
    <TouchableOpacity
      onPress={() => toggleModalVisibility()}
      style={styles.touchableOpacity}
    >
      <TextModal
        numberClicked={numberClicked}
      />
    </TouchableOpacity>
  </Modal>
  

• 临时屏蔽警告（不推荐）
  如果暂时无法升级或替换组件，可以在开发环境临时屏蔽这条警告，但不建议长期这么做——废弃API可能在后续React Native版本中被彻底移除：
  在项目入口文件（比如App.js）添加以下代码：

  import { LogBox } from 'react-native';
  LogBox.ignoreLogs(['setNativeProps is deprecated']);
  

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