Question

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

无法读取未定义的属性'func'

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

纱线安装v1.3.2警告../../../package.json：无许可证栏

[1/4]解析包... [2/4]获取包...信息

fsevents@1.1.2：平台“linux”与此模块不兼容。

info“fsevents@1.1.2”是可选的依赖项，但失败了

兼容性检查。从安装中排除它。 [3/4]链接

依赖...警告“＆gt; react-native-fade-in-view@1.0.4”有   不正确的同伴依赖“react@^15.4.2”。警告“＆gt;   react-native-fade-in-view@1.0.4“具有不正确的对等依赖性   “react-native@^0.40.0”。警告“＆gt; babel-jest@21.2.0”有未满足的同行   依赖   “babel-core@^6.0.0 || ^ 7.0.0-alpha || ^ 7.0.0-beta ||   ^ 7.0.0“。[4/4]建造新包装......在6.51s完成。

我还使用以下步骤更新了我的纱线： 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 v15.5起，React.PropTypes已移至另一个包中。请改用prop-types库。

由于这个包只是一个简单的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包。

“react-native-fade-in-view”导致“无法读取未定义的属性'func'错误

1 个答案: