react-native - 升级到 Expo SDK36 (RN 0.61) 后开始出现警告:componentWillMount 已重命名,不建议用于有天赋的聊天
问题描述
升级到 Expo SDK36 (RN 0.61) 后 react-native-gifted-chat 开始抛出这两个警告(componentWillMount 和 componentWillReceiveProps 已重命名):
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",
以下是我实施天才聊天的方法:
<GiftedChat
renderInputToolbar={this.renderInputToolbar}
renderUsernameOnMessage={true}
renderBubble={this.renderBubble}
renderSend={this.renderSend}
renderTime={this.renderTime}
renderAvatarOnTop={true}
renderMessageImage={this.renderMessageImage}
scrollToBottom={true}
messages={this.state.messages}
onSend={messages => this.onSend(messages)}
onPressAvatar={user => this.onPressAvatar(user)}
user={{
_id: this.props.screenProps.userName,
name: this.props.screenProps.userName,
avatar: this.props.screenProps.userImage
}}
/>
有没有办法解决我自己的这些警告,还是我应该等待新的有天赋的聊天发布?
解决方案
所以解决这个问题的方法是创建一个自定义 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
推荐阅读
- rollup - 更换代码后出现TS2367错误怎么处理?
- vb.net - 编辑文本文件并使用编辑保存文本文件
- go - 在 vscode 中将 golang 升级到 1.1.5 未显示
- python-3.x - 如何将数据框的多列附加到新的空数据框
- xamarin.forms - 如何使用我的自定义图像按钮来触发 Xamarin 中的弹出页面?
- java - swing如何清除JTable边框?
- python - 如何在打印输入后添加空格
- jquery - 在下拉列表中显示与选项对应的数组中的数据
- javascript - window.event 可以共享变量吗?
- python - 使用 bs4 从字符串中删除 html 标签