世博会更新到最新版本后，componentWillReceiveProps错误

时间：2020-01-06 17:04:07

标签： react-native expo

我为应用程序的首页编写了以下代码：

import React, {Component} from 'react';
import { Actions } from 'react-native-router-flux';
import { StyleSheet, ImageBackground, Text, View, TouchableOpacity } from 'react-native';

import SideMenuButton from '../components/TabBarIcon';

export default class Home extends Component {

  constructor(props) {
    super(props);
    this.state = { 
      location: null,
      errorMessage: null,
    }
  }

  render() {

    return(
      <ImageBackground source={require('../images/Home.png')} style={styles.container}>
        <SideMenuButton/>

        <View style={{height: '10%'}}></View>
        <View style={styles.containerCenter}>
          <Text style={styles.titleAzure}>
            APP NAME
          </Text>
        </View>
        <View style={{flex: 3, justifyContent: 'center', alignItems: 'center'}}>
          <TouchableOpacity style={styles.button} onPress={ () => Actions.attention() }> 
            <Text style={styles.buttonText}>START</Text>
          </TouchableOpacity>
        </View>
      </ImageBackground>
    );
  }
}

const styles = StyleSheet.create({

  container: {
    flex: 1,
    backgroundColor: 'white'
  },
  containerCenter: {
    flex: 2, 
    justifyContent: 'center', 
    alignItems: 'center', 
    marginBottom: 180
  },
  titleAzure: {
    color: '#00b0ff',
    fontWeight: 'bold',
    fontSize: 55,
    fontFamily: 'RobotoBold'
  },
  titleGold: {
    color: 'gold',
    fontWeight: 'bold',
    fontSize: 65,
    fontFamily: 'RobotoBold'
  },
  button: {
    height: 70,
    width: 280,
    alignItems: 'center',
    backgroundColor: 'white',
    justifyContent: 'center', 
    borderRadius: 42,
    borderWidth: 0.6,
    borderColor: '#00b0ff'
  },
  buttonText: {
    color: '#00b0ff',
    fontSize: 20,
    fontFamily: 'RobotoRegular',
    alignItems: 'center',
    justifyContent: 'center',
  }
});

组件TabBarIcon的定义如下：

import React, { Component } from 'react';
import { Ionicons } from '@expo/vector-icons';

export default class TabBarIcon extends Component {
  render() {
    return (
      <Ionicons
        name={this.props.name}
        size={26}
        style={{ marginBottom: -3 }}
        color={this.props.focused ? '#00b0ff' : '#b3b3b5'}
      />
    );
  }
}

最近，将Expo SDK更新到最新版本后，我有了这个warning：

警告：componentWillReceiveProps已重命名，不建议使用。 *将获取数据的代码或副作用移到componentDidUpdate。

  • 如果在道具更改时要更新状态，请重构代码以使用备注技术或将其移至静态getDerivedStateFromProps。

  • 将componentWillReceiveProps重命名为UNSAFE_componentWillReceiveProps以在非严格模式下禁止显示此警告。在React 17.x中，只有UNSAFE_名称起作用。要将所有已弃用的生命周期重命名为其新名称，可以在项目源文件夹中运行npx react-codemod rename-unsafe-lifecycles。

请更新以下组件：SafeView，过渡器

我使用命令npx react-codemod rename-unsafe-lifecycles，但是所有文件都被跳过。

堆栈跟踪： 

- 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:18556:30 in scheduleUpdateOnFiber
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:7799:17 in classComponentUpdater.enqueueSetState
- node_modules/react/cjs/react.development.js:325:31 in Component.prototype.setState
* App.js:85:2 in App
- node_modules/expo/build/launch/AppLoading.js:30:31 in _startLoadingAppResourcesAsync
- node_modules/regenerator-runtime/runtime.js:45:44 in tryCatch
- node_modules/regenerator-runtime/runtime.js:271:30 in invoke
- node_modules/regenerator-runtime/runtime.js:45:44 in tryCatch
- node_modules/regenerator-runtime/runtime.js:135:28 in invoke
- node_modules/regenerator-runtime/runtime.js:145:19 in Promise.resolve.then$argument_0
- node_modules/promise/setimmediate/core.js:37:14 in tryCallOne
- node_modules/promise/setimmediate/core.js:123:25 in setImmediate$argument_0
- node_modules/react-native/Libraries/Core/Timers/JSTimers.js:146:14 in _callTimer
- node_modules/react-native/Libraries/Core/Timers/JSTimers.js:194:17 in _callImmediatesPass
- node_modules/react-native/Libraries/Core/Timers/JSTimers.js:458:30 in callImmediates
* [native code]:null in callImmediates
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:407:6 in __callImmediates
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:143:6 in __guard$argument_0
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:384:10 in __guard
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:142:17 in __guard$argument_0
* [native code]:null in flushedQueue
* [native code]:null in invokeCallbackAndReturnFlushedQueue

在下面的图片中，您可以看到App.js文件的代码，第80-80行： enter image description here

此文件的完整代码位于以下链接：https://pastebin.com/iUHkNxGk

修改后的代码：

function cacheImages(images) {
  return images.map(image => {
    if (typeof image === 'string') {
      return Image.prefetch(image);
    } else {
      return Asset.fromModule(image).downloadAsync();
    }
  });
}

function cacheFonts(fonts) {
  // return fonts.map(font => Font.loadAsync(font));
  return Font.loadAsync(fonts);
}   

async _loadAssetsAsync() {

    const imageAssets = cacheImages([
      require('./images/Home.png'),
      require('./images/Attention.png'),
      require('./images/NumberVehicle.png'),
      require('./images/Information.png'),
      require('./images/Choice.png'),
      require('./images/AppQuestion.png'),
      require('./images/NoProblem.png'),
      require('./images/Choice2.png'),
      require('./images/AlmostDone.png'),
      require('./images/Witness.png'),
      require('./images/Wounded.png'),

      require('./icons/camera.png'),
      require('./icons/car.png'),
      require('./icons/arrow.png'),
      require('./icons/stop.png'),
      require('./icons/cameraFilled.png'),
    ]);

    const fontAssets = cacheFonts({
      'RobotoMedium': require('./assets/fonts/Roboto-Medium.ttf'),
      'RobotoRegular': require('./assets/fonts/Roboto-Regular.ttf'),
      'RobotoThin': require('./assets/fonts/Roboto-Thin.ttf'),
      'RobotoBold': require('./assets/fonts/Roboto-Bold.ttf')
    });

    await Promise.all([...imageAssets, ...fontAssets]);
  }

render() {
  if (!this.state.isReady) {
    return (
      <AppLoading
        startAsync={this._loadAssetsAsync}
        onFinish={() => this.setState({ isReady: true })}
        onError={console.warn}
      />
    );
  }
  return(<View><Text>asdf<Text></View>);
}

0 个答案:

没有答案
相关问题
最新问题