升级到 Expo SDK36 (RN 0.61) 后开始收到 Warning: componentWillMount has been renamed, and is not recommended for use for gifted-chat

Question

升级到 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
- 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
- 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",

以下是我实现 gifted-chat 的方法：

            <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
              }}
            />

有没有办法自己解决这些警告，还是应该等待新的 gifted-chat 发布？

Answer 1

所以解决这个问题的方法是创建一个自定义 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

Answer 2

我想，升级到最新版本(0.13.0)的优聊可以解决这个问题。

事实上，我的应用程序在升级后立即显示了类似的警告，但是当我升级了 gifted chat 后，这条消息就不再出现了。