Node.js 与react native和react的兼容性问题？（已移动包/依赖项）

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

└── 反应-native@0.45.1
└── react@16.0.0-阿尔法.12

这是my 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

导入按钮之后；疯狂开始了。以下是我收到的错误消息：

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

->

viewstypeproptypes

->

LayoutPropTypes

Animated

->

Image.android

->

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”导入React
进口{
看法
文本，
可触摸不透明度，
视图类型，
样式表，
}从“反应本机”
从“道具类型”导入道具类型
从“../lib/coalesceNonElementChildren”导入coalesceNonElementChildren
从“../../lib/appStyles”导入{AppStyle}
常数SystemButtonCapacity=0.2；
导出默认类AppButton扩展React.Component{
静态类型={
…TouchableOpacity.propTypes，
allowFontScaling:PropTypes.allowFontScaling，
containerStyle:ViewPropTypes.style，
wrapperBorderStyle:ViewPropTypes.style，
wrapperStyle:ViewPropTypes.style，
禁用：PropTypes.bool，
style:PropTypes.style，
styleDisabled:PropTypes.style，
};
render（）{
让触控道具={
activeOpacity:此.\u ComputeActivityCapity（），
};
如果（！this.props.disabled）{
touchableProps.onPress=this.props.onPress；
touchableProps.onPressIn=此.props.onPressIn；
touchableProps.onPressOut=this.props.onPressOut；
touchableProps.onLongPress=此.props.onLongPress；
}
返回(
{this.\u renderGroupedChildren（）}
);
}
_renderGroupedChildren（）{
设{disabled}=this.props；
让样式=[
styles.text，
已禁用？styles.disabledText:null，
这是道具风格，
禁用？this.props.styleDisabled:null，
];
let children=联合非元素children（this.props.children，（children，index）=>{
返回(
{儿童}
);
});
开关（儿童.长度）{
案例0：
返回null；
案例1：
返回子项[0]；
违约：
返回{children}；
}
}
_ComputeActivityCapacity（）{
如果（此.props.disabled）{
返回1；
}
是否返回this.props.activeOpacity？
this.props.activeOpacity：
系统按钮能力；
}
}
const styles=StyleSheet.create({
包装器边框：{
边界半径：7，
backgroundColor:AppStyle.controlBorderColor，
填充底部：5，
差额：10，
marginLeft:30，
marginRight:30，
为内容辩护：“中心”，
},
包装器：{
边界半径：7，
backgroundColor:AppStyle.controlBackgroundColor，
自我定位：“拉伸”，
},
正文：{
颜色：AppStyle.controlTextColor，
尺寸：17，
容重：“500”，
textAlign:'中心'，
},
禁用文本：{
颜色：AppStyle.disabledControlTextColor，
},
组：{
flexDirection:'行'，
justifyContent:'之间的空间'，
对齐项目：“居中”，
},
});

---

我不明白发生了什么，因为我用过react@16.0.0-alpha.12在成功之前。我错过了什么？为了使项目正常工作，我是否应该更新或降级某些内容？

发生这种情况是因为您可能正在使用的依赖项组件仍然没有更改。现在你应该降低你的反应版本，并确保你使用的组件遵循当前的程序。我正在努力跟上最新的版本，我想所有这些版本都让我有点头晕目眩。我将try@ShubhamKhatri我将react版本降级为16.0.0-alpha-6版本，但我的react本机版本（0.45.1）抱怨缺少

对等dep：react@16.0.0-阿尔法.12，react要求的-native@0.45.1

因此，react-native本身表明它需要此版本。我不知道如何修复此问题，但当我使用

react-native init HelloWorld设置新项目时，也会收到这些警告。这可能是react软件包本身的问题。是的，这也是我的观察结果。我最近安装了一个模板，它作为包装器安装。现在我回到RN 0.44.3，一切正常。虽然没有自定义模块支持，但基本上没有任何帮助，这种情况会发生，因为您可能正在使用的依赖项组件仍然没有这种更改。现在你应该降低你的反应版本，并确保你使用的组件遵循当前的程序。我正在努力跟上最新的版本，我想所有这些版本都让我有点头晕目眩。我将try@ShubhamKhatri我将react版本降级为16.0.0-alpha-6版本，但我的react本机版本（0.45.1）抱怨缺少
对等dep：react@16.0.0-阿尔法.12，react要求的-native@0.45.1
因此，react-native本身表明它需要此版本。我不知道如何修复此问题，但当我使用
react-native init HelloWorld设置新项目时，也会收到这些警告。这可能是react软件包本身的问题。是的，这也是我的观察结果。我最近安装了一个模板，它作为包装器安装。现在我是b