首页 > 解决方案 > 使用 react-native-elements 反应原生 - 警告 => 'ListItem.title' 属性已被弃用,将在下一个版本中删除

问题描述

有没有人摆脱这些烦人的警告?

'ListItem.title' prop has been deprecated and will be removed in the next version.
* [native code]:null in __expoConsoleLog
- node_modules/react-native/Libraries/LogBox/LogBox.js:36:4 in console.warn
- node_modules/expo/build/environment/muteWarnings.fx.js:18:4 in warn
- node_modules/react-native-elements/src/list/ListItem.js:92:13 in ListItem
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:10989:26 in renderWithHooks
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:14035:27 in mountIndeterminateComponent
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:22002:24 in beginWork$$1
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:20871:23 in performUnitOfWork
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:20848:38 in workLoopSync
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:20456:22 in performSyncWorkOnRoot
* [native code]:null in performSyncWorkOnRoot
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:5703:31 in runWithPriority$argument_1
- node_modules/scheduler/cjs/scheduler.development.js:818:23 in unstable_runWithPriority
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:5698:21 in flushSyncCallbackQueueImpl
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:5686:28 in flushSyncCallbackQueue
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:19845:30 in scheduleUpdateOnFiber
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:11880:16 in dispatchAction
* [native code]:null in dispatchAction
* src/hooks/useStores.js:13:2 in useEffect$argument_0
- node_modules/promise/setimmediate/core.js:37:13 in tryCallOne
- node_modules/promise/setimmediate/core.js:123:24 in setImmediate$argument_0
- node_modules/react-native/Libraries/Core/Timers/JSTimers.js:135:14 in _callTimer
- node_modules/react-native/Libraries/Core/Timers/JSTimers.js:183:16 in _callImmediatesPass
- node_modules/react-native/Libraries/Core/Timers/JSTimers.js:446:30 in callImmediates
* [native code]:null in callImmediates
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:396:6 in __callImmediates
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:144:6 in __guard$argument_0
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:373:10 in __guard
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:143:4 in flushedQueue
* [native code]:null in flushedQueue
* [native code]:null in callFunctionReturnFlushedQueue

我在 package.json 中运行它"react-native-elements": "^2.3.2",

根据他们的文档 here

这是一个稳定的版本

在此处输入图像描述

解决方案:

使用新标签而不是道具重写所有 UI 组件

标签: react-native-elements

解决方案


对于 ListItem 弃用警告,您现在可以将许多道具(例如标题)设置为子项。

解释它的升级指南:

https://react-native-elements.github.io/react-native-elements/blog/2020/08/10/2.3-upgrade-guide/

示例列表项

<ListItem>
  <ListItem.Content>
    <ListItem.Title style={titleStyle} {...titleProps}>
      {title}
    </ListItem.Title>
  </ListItem.Content>
</ListItem>

推荐阅读