"反应本机淡入淡出视图"导致"无法读取未定义的属性'函数'"错误

Question

我是React Native中的新手，我需要在项目中使用" React-Native-invade-In-in-tim-in-in-tim-in-tim-In-in-tim-In-in-fiew"。但是，正如我在项目中使用的import FadeInView from 'react-native-fade-in-view';一样，显示了以下错误：

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

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

纱线安装v1.3.2警告../../../../package.json：没有许可字段

[1/4]解决方案... [2/4]获取软件包...信息

fsevents@1.1.2：平台" Linux"与此模块不兼容。

信息" fsevents@1.1.2"是可选的依赖性，失败

兼容性检查。将其排除在安装之外。[3/4]链接

依赖项...警告"> react-native-native-in-in-view@1.0.4" 不正确的同伴依赖性" react@^15.4.2"。警告"> react-native-invade in-view@1.0.4"同行依赖性不正确 " react-native@^0.40.0"。警告"> 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.proptypes自从React V15.5以来已进入另一个软件包。请改用Prop-Types库。

由于此软件包只是一个简单的反应组件，我建议您在项目中复制此组件，然后在本地导入。

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软件包。