升级到Expo SDK36（RN 0.61）后，react-native-gifted-chat开始引发以下两个警告（componentWillMount和componentWillReceiveProps已重命名）：
private static Boolean IsFileLocked(FileInfo file)
{
FileStream stream = null;
try
{
//Don't change FileAccess to ReadWrite,
//because if a file is in readOnly, it fails.
stream = file.Open
(
FileMode.Open,
FileAccess.Read,
FileShare.None
);
}
catch (IOException)
{
//the file is unavailable because it is:
//still being written to
//or being processed by another thread
//or does not exist (has already been processed)
return true;
}
finally
{
if (stream != null)
stream.Close();
}
//file is not locked
return false;
}
Warning: componentWillMount has been renamed, and is not recommended for use.
* Move code with side effects to componentDidMount, and set initial state in the constructor.
* Rename componentWillMount to UNSAFE_componentWillMount to suppress this warning in non-strict mode. In React 17.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run `npx react-codemod rename-unsafe-lifecycles` in your project source folder.
Please update the following components: LightboxOverlay
- node_modules\react-native\Libraries\YellowBox\YellowBox.js:71:8 in console.warn
- node_modules\expo\build\environment\muteWarnings.fx.js:18:23 in warn
- node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:5864:19 in printWarning
- node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:5892:25 in lowPriorityWarning
- node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:6116:8
in ReactStrictModeWarnings.flushPendingUnsafeLifecycleWarnings
- node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:20377:6 in flushRenderPhaseStrictModeWarningsInDEV
- node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:19606:41 in commitRootImpl
* [native code]:null in commitRootImpl
- node_modules\scheduler\cjs\scheduler.development.js:643:23 in unstable_runWithPriority
- node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:19590:4 in commitRoot
* [native code]:null in commitRoot
- node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:18709:28 in runRootCallback
* [native code]:null in runRootCallback
- node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:5642:32 in runWithPriority$argument_1
- node_modules\scheduler\cjs\scheduler.development.js:643:23 in unstable_runWithPriority
- node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:5638:22 in flushSyncCallbackQueueImpl
- node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:5627:28 in flushSyncCallbackQueue
- node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:18796:28 in batchedUpdates$1
- node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:2709:30 in batchedUpdates
- node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:2794:17 in batchedUpdates$argument_0
- node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:2814:26 in receiveEvent
- node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:436:47 in __callFunction
- node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:111:26 in __guard$argument_0
- node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:384:10 in __guard
- node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:110:17 in __guard$argument_0
* [native code]:null in callFunctionReturnFlushedQueue
我正在使用：
Warning: componentWillReceiveProps has been renamed, and is not recommended for use.
* Move data fetching code or side effects to componentDidUpdate.
* If you're updating state whenever props change, refactor your code to use memoization techniques or move it to static getDerivedStateFromProps. * Rename componentWillReceiveProps to UNSAFE_componentWillReceiveProps to suppress this warning in non-strict mode. In React 17.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run `npx react-codemod rename-unsafe-lifecycles` in your project source folder.
Please update the following components: LightboxOverlay
- node_modules\react-native\Libraries\YellowBox\YellowBox.js:71:8 in console.warn
- node_modules\expo\build\environment\muteWarnings.fx.js:18:23 in warn
- node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:5864:19 in printWarning
- node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:5892:25 in lowPriorityWarning
- node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:6135:8
in ReactStrictModeWarnings.flushPendingUnsafeLifecycleWarnings
- node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:20377:6 in flushRenderPhaseStrictModeWarningsInDEV
- node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:19606:41 in commitRootImpl
* [native code]:null in commitRootImpl
- node_modules\scheduler\cjs\scheduler.development.js:643:23 in unstable_runWithPriority
- node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:19590:4 in commitRoot
* [native code]:null in commitRoot
- node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:18709:28 in runRootCallback
* [native code]:null in runRootCallback
- node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:5642:32 in runWithPriority$argument_1
- node_modules\scheduler\cjs\scheduler.development.js:643:23 in unstable_runWithPriority
- node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:5638:22 in flushSyncCallbackQueueImpl
- node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:5627:28 in flushSyncCallbackQueue
- node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:18796:28 in batchedUpdates$1
- node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:2709:30 in batchedUpdates
- node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:2794:17 in batchedUpdates$argument_0
- node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:2814:26 in receiveEvent
- node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:436:47 in __callFunction
- node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:111:26 in __guard$argument_0
- node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:384:10 in __guard
- node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:110:17 in __guard$argument_0
* [native code]:null in callFunctionReturnFlushedQueue
这是我实施天才聊天的方式：
"expo": "^36.0.0",
"react-native": "https://github.com/expo/react-native/archive/sdk-36.0.0.tar.gz", which is 0.61
"react-native-gifted-chat": "^0.12.0",
我是否有办法解决这些警告？还是应该等待新的有才华发布？
答案 0 :(得分：0)
解决这个问题的方法是创建一个自定义MessageImage组件：
/* eslint no-use-before-define: ["error", { "variables": false }] */
import React from 'react';
import { Text, View, Image, Modal, SafeAreaView, StyleSheet, TouchableOpacity } from 'react-native';
import ImageViewer from 'react-native-image-zoom-viewer';
//import FastImage from 'react-native-fast-image';
export default class MessageImage extends React.PureComponent {
constructor(props) {
super(props);
this.state = {
viewerModalOpen: false,
};
}
render() {
const { containerStyle, lightboxProps, imageProps, imageStyle, currentMessage } = this.props;
console.log('ali', this.props.alignment);
//console.log(containerStyle, lightboxProps, imageProps, imageStyle, currentMessage);
return (
<React.Fragment>
<TouchableOpacity
onPress={() => {
this.setState({ viewerModalOpen: true });
}}
onLongPress={() => {
this.props.onLongPress();
}}
alignment={this.props.alignment}
style={[styles.container, containerStyle]}
>
<Image
{...imageProps}
resizeMode={'cover'}
style={imageStyle}
source={{ uri: currentMessage.image }}
/>
</TouchableOpacity>
<Modal visible={this.state.viewerModalOpen} transparent={true} onRequestClose={() => { }}>
<SafeAreaView style={{ flex: 1, backgroundColor: 'transparent' }}>
<ImageViewer
imageUrls={[{ url: currentMessage.image }]}
onCancel={() => {
this.setState({ viewerModalOpen: false });
}}
enableSwipeDown
renderHeader={() => (
<TouchableOpacity
onPress={() => {
this.setState({ viewerModalOpen: false });
}}
>
<Text style={styles.closeButton}>Close</Text>
</TouchableOpacity>
)}
/>
</SafeAreaView>
</Modal>
</React.Fragment>
);
}
}
const styles = StyleSheet.create({
container: {
},
image: {
},
closeButton: {
}
});
渲染功能
renderMessageImage(props) {
return (
<MessageImage
{...props}
imageStyle={{
width: '94%',
height: 150,
resizeMode: 'center',
borderRadius: 20,
alignSelf: 'center',
}}
/>
);
}
ImageViewer似乎也引发了这些错误，但我看到已经准备好PR：https://github.com/ascoders/react-native-image-viewer/pull/358
答案 1 :(得分：0)
我认为，升级到最新版本（0.13.0）的天才聊天将解决此问题。
事实上，我的应用在升级后立即显示了类似的警告，但是一旦我升级了有才华的聊天，此消息就会停止出现。