与本地反应的兼容性问题和反应？ （移动包/依赖项）

Question

我最近将我的项目更新为以下内容：

  

└──reaction-native@0.45.1
  └──abid@16.0.0-alpha.12

这是我的package.json：

  "dependencies": {
    "prop-types": "^15.5.10",
    "react": "^15.5.4",
    "react-native": "^0.45.1",
    "react-native-button": "^2.0.0",
    "react-native-elements": "^0.12.2",
    "react-native-exception-handler": "^1.0.1",
    "react-native-orientation": "^1.17.0",
    "react-native-vector-icons": "^4.2.0",
    "react-navigation": "^1.0.0-beta.11",
    "react-redux": "^5.0.5",
    "redux": "^3.6.0",
    "redux-logger": "^3.0.6",
    "redux-persist": "^4.8.0",
    "redux-thunk": "^2.2.0"
  },
  "devDependencies": {
    "babel-jest": "20.0.3",
    "babel-preset-react-native": "1.9.2",
    "jest": "20.0.4",
    "react-test-renderer": "^15.5.4"
  },

我的项目在空的时候运行正常，但是从react-native-button导入Button之后;疯狂开始了。这些是我收到的错误消息：

Warning: PropTypes has been moved to a separate package. Accessing React.PropTypes is no longer supported and will be removed completely in React 16. Use the prop-types package on npm instead.
Warning: React.createClass is no longer supported. Use a plain JavaScript class instead. If you're not yet ready to migrate, create-react-class is available on npm as a drop-in replacement.

我将开始使用这些新软件包，但错误来自TouchableOpacity组件及其使用的一些组件：

AnimatedImplementation - ＆gt; ViewStylePropTypes - ＆gt; LayoutPropTypes
Animated - ＆gt; Image.android - ＆gt; View

当我提取代码并按预期进行必要的更改时，会发生同样的情况：

import React from 'react'
import {
    View,

    Text,
    TouchableOpacity,
    ViewPropTypes,
    StyleSheet,
} from 'react-native'
import PropTypes from 'prop-types'

import coalesceNonElementChildren from '../../lib/coalesceNonElementChildren'
import { AppStyle } from '../../lib/appStyles'

const systemButtonOpacity = 0.2;

export default class AppButton extends React.Component {
    static propTypes = {
        ...TouchableOpacity.propTypes,
        allowFontScaling: PropTypes.allowFontScaling,
        containerStyle: ViewPropTypes.style,
        wrapperBorderStyle: ViewPropTypes.style,
        wrapperStyle: ViewPropTypes.style,
        disabled: PropTypes.bool,
        style: PropTypes.style,
        styleDisabled: PropTypes.style,
    };

    render() {
        let touchableProps = {
            activeOpacity: this._computeActiveOpacity(),
        };
        if (!this.props.disabled) {
            touchableProps.onPress = this.props.onPress;
            touchableProps.onPressIn = this.props.onPressIn;
            touchableProps.onPressOut = this.props.onPressOut;
            touchableProps.onLongPress = this.props.onLongPress;
        }

        return (
            <View style={this.props.wrapperBorderStyle ? this.props.wrapperBorderStyle : styles.wrapperBorder}>
                <View style={this.props.wrapperStyle ? this.props.wrapperStyle : styles.wrapper}>
                    <TouchableOpacity
                        {...touchableProps}
                        testID={this.props.testID}
                        style={this.props.containerStyle}
                        accessibilityTraits="button"
                        accessibilityComponentType="button">
                        {this._renderGroupedChildren()}
                    </TouchableOpacity>
                </View>
            </View>
        );
    }
    _renderGroupedChildren() {
        let { disabled } = this.props;
        let style = [
            styles.text,
            disabled ? styles.disabledText : null,
            this.props.style,
            disabled ? this.props.styleDisabled : null,
        ];

        let children = coalesceNonElementChildren(this.props.children, (children, index) => {
            return (
                <Text key={index} style={style} allowFontScaling={this.props.allowFontScaling}>
                    {children}
                </Text>
            );
        });

        switch (children.length) {
            case 0:
                return null;
            case 1:
                return children[0];
            default:
                return <View style={styles.group}>{children}</View>;
        }
    }

    _computeActiveOpacity() {
        if (this.props.disabled) {
            return 1;
        }
        return this.props.activeOpacity ?
            this.props.activeOpacity :
            systemButtonOpacity;
    }
}

const styles = StyleSheet.create({
    wrapperBorder: {
        borderRadius: 7,
        backgroundColor: AppStyle.controlBorderColor,
        paddingBottom: 5,
        margin: 10,
        marginLeft: 30,
        marginRight: 30,
        justifyContent: 'center',
    },

    wrapper: {
        borderRadius: 7,
        backgroundColor: AppStyle.controlBackgroundColor,
        alignSelf: 'stretch',
    },

    text: {
        color: AppStyle.controlTextColor,
        fontSize: 17,
        fontWeight: '500',
        textAlign: 'center',
    },
    disabledText: {
        color: AppStyle.disabledControlTextColor,
    },

    group: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
    },
});

我不明白发生了什么，因为我在成功之前使用过react@16.0.0-alpha.12。我错过了什么？我应该更新或降级某些东西才能使我的项目有效吗？