javascript - "react-native-fade-in-view"导致 "Cannot read property ' func ' of undefined"错误

Question

我是 React Native 的新手，我需要在我的项目中使用“react-native-fade-in-view”。但是，当我在项目中使用 import FadeInView from 'react-native-fade-in-view'; 时，显示以下错误:

Cannot read property 'func' of undefined

当我删除模块文件夹并在项目上应用 yarn 命令来刷新文件夹时，显示以下警告:

yarn install v1.3.2 warning ../../../package.json: No license field

[1/4] Resolving packages... [2/4] Fetching packages... info

fsevents@1.1.2: The platform "linux" is incompatible with this module.

info "fsevents@1.1.2" is an optional dependency and failed

compatibility check. Excluding it from installation. [3/4] Linking

dependencies... warning " > react-native-fade-in-view@1.0.4" has incorrect peer dependency "react@^15.4.2". warning " > react-native-fade-in-view@1.0.4" has incorrect peer dependency "react-native@^0.40.0". warning " > babel-jest@21.2.0" has unmet peer dependency "babel-core@^6.0.0 || ^7.0.0-alpha || ^7.0.0-beta || ^7.0.0". [4/4] Building fresh packages... Done in 6.51s.

我还使用以下步骤更新了我的 yarn : https://github.com/yarnpkg/yarn/issues/3042 你知道我的项目发生了什么吗？

这是我的总代码:

import React, { Component } from "react";
import { StyleSheet, AsyncStorage, Dimensions, Image, ImageBackground, Platform, ScrollView, StatusBar, TouchableHighlight, TouchableOpacity, View, Text,  TextInput } from "react-native";
import { Body, Switch, Button, Container, Content, Header, Input, InputGroup, Left, Right, StyleProvider, Title } from "native-base";
import I18n from '../../libs/i18n';
import {Config} from '../../config';
// import PropTypes from 'prop-types';
import FadeInView from 'react-native-fade-in-view';

export default class Home extends React.Component {
  static navigationOptions = {
    title: I18n.t('Login'),
  };

  constructor() {
    super();
    this.state = {

    };

  }

  render() {

    if(this.timer > 0) return;
        this.timer = setTimeout(() => {
          //turn off the pop up
           this.props.navigation.navigate('Home_Tool');
          this.timer = null;  //not necessary if you are unmounting the component
        }, 3000);

    return (

            <Image source={require('../../assets/images/Home/tt.jpg')} style={styles.Container} >
              <View style={styles.logoContiainer}>

                  <Image source={require('../../assets/images/Home/ttt.png')} style={styles.Container} />

              </View>
            </Image>

            );


  }
};

const styles = StyleSheet.create({

  Container: {
    flex: 1,
       // remove width and height to override fixed static size
    width: null,
    height: null,
    justifyContent: 'center',
    alignItems: 'center',
  },

  logoContiainer: {
    flex: 0.25,
    flexDirection: 'column',
    justifyContent: 'center',
    width: (Dimensions.get('window').width)/2,

  },


});

Answer 1

包react-native-fade-in-view正在从React导入propTypes，我不知道你正在使用什么版本的React，但这不再受支持:

React.PropTypes has moved into a different package since React v15.5. Please use the prop-types library instead.

由于这个包只是一个简单的 React 组件，我建议您将这个组件复制到您的项目中，然后在本地导入。

import React, { Component } from "react";
import { Animated } from "react-native";
import PropTypes from "prop-types";

class FadeInView extends Component {
  constructor() {
    super();

    this.state = {
      viewOpacity: new Animated.Value(0)
    };
  }

  componentDidMount() {
    const { viewOpacity } = this.state;
    const { onFadeComplete, duration = 500 } = this.props;

    Animated.timing(viewOpacity, {
      toValue: 1,
      duration
    }).start(onFadeComplete || (() => {}));
  }

  render() {
    const { viewOpacity } = this.state;
    const { style } = this.props;

    return (
      <Animated.View style={[{ opacity: viewOpacity }].concat(style || [])}>
        {this.props.children}
      </Animated.View>
    );
  }
}

FadeInView.propTypes = {
  onFadeComplete: PropTypes.func, // This was throwing error because PropTypes is undefined
  duration: PropTypes.number,
  style: PropTypes.oneOfType([
    PropTypes.number,
    PropTypes.string,
    PropTypes.object,
    PropTypes.array
  ]),
  children: PropTypes.oneOfType([PropTypes.array, PropTypes.object]).isRequired
};

export default FadeInView;

然后确保您的项目依赖项中有 prop-types 包。