时间戳

首页 > 解决方案 > 反应原生捆绑失败：错误：需要 Babel“^7.0.0-0”，但加载了“6.26.3”

react-native - 反应原生捆绑失败：错误：需要 Babel“^7.0.0-0”，但加载了“6.26.3”

问题描述

在我的 react native 应用程序中使用 Expo 时出现错误。导入以下代码行时。（只有我使用导入'expo'的部分代码）

import {Permissions, ImagePicker} from 'expo';

我得到一个错误。我整天都在寻找解决方案。我认为是因为我使用的 React 版本更新了？我试过这篇文章，但它没有用，而且出现了更多错误。还删除了 node_modules 文件夹并重新安装它，但似乎没有任何效果。

安装yarn add babel-core@7.0.0-bridge.0应用程序时崩溃（对象作为 React Child 无效”。在调试模式下它也不起作用。

还有一些纱线检查错误。在安装缺少的依赖项时，我什至会遇到更多错误。

捆绑失败：错误：需要 Babel“^7.0.0-0”，但加载了“6.26.3”。如果你确定你有一个兼容的@babel/core 版本，很可能你的构建过程中加载了错误的版本。检查此错误的堆栈跟踪以查找第一个未提及“@babel/core”或“babel-core”的条目，以查看调用 Babel 的内容。（同时处理预设：“E:\stack\Github\turfMeister\testProject\node_modules\babel-preset-expo\index.js”）在 throwVersionError (E:\stack\Github\turfMeister\testProject\node_modules@babel\plugin- proposal-decorators\node_modules@babel\helper-plugin-utils\lib\index.js:65:11) 在 Object.assertVersion (E:

整个组件：

import React, {Component} from "react";
import {
    View, Text, StyleSheet, Button, Image,TouchableOpacity,Alert
} from "react-native";
import {Avatar, Divider, Header} from "react-native-elements";
import {auth, database} from "../config/config";
import {Permissions, ImagePicker} from 'expo'; //enabling this line gives an error



class GlobalAccount extends Component {

constructor(props) {
    super(props);

    this.state = {

        user_code: "Chen",
        user_object: null,
        user_avatar: null,
        user_first_name: null,
        user_last_name: null,
        user_email: null,

        imageID: this.uniqueId(),

    };

    alert(this.uniqueId());
    this.findNewImage();

}

s4 = () => {

    return Math.floor((1 + Math.random()) * 0x10000)
        .toString(16)
        .substring(1);
};

uniqueId = () => {
    return this.s4() + "-" + this.s4() + "-" + this.s4() + "-" + this.s4() + "-"
        + this.s4() + "-" + this.s4() + "-" + this.s4() + "-" + this.s4();
};

_checkPermissiosn = async () => {
    const { statusCamera } = await Permissions.askAsync(Permissions.CAMERA);
    this.setState({cameraPermission: statusCamera});

    const { statusCameraRoll } = await Permissions.askAsync(Permissions.CAMERA_ROLL);
    this.setState({cameraPermission: statusCameraRoll});



};

findNewImage = async () => {
    this._checkPermissiosn();

};




/**
 * Testing purpose only.
 */
alertElement(){
    Alert.alert(
        "Change your profile photo?",
        "",
        [
            {text: "no"},
            {text: "yes"}
        ]
    )
}

/**
 * Before mounting the scene, load the data
 */
componentWillMount(){
    this.loadDataFromDatabase();
}


/**
 * When pressed, logout the user.
 */
signUserOut = () => {
    var that = this;

    auth.signOut()
        .then(console.log("user is signed out"))
        .catch((error) => console.log("error occured while signing user out: ", error));

    that.setState({
        loggedin: false
    })
};


/**
 * Download the data from the server.
 * Only data corresponding to the user.
 */
loadDataFromDatabase = () => {
    this.setState({
        refresh: true,
        groups: [],
    });

    var that = this;

    // exampleUser must be the user who is logged in.
    database.ref('Users').child(this.state.user_code).once("value")
        .then(function (snapshot) {
            const exists = (snapshot.val() !== null);

            if (exists) {
                var user_object = snapshot.val();

                console.log("user_object is : " , user_object.avatar);
                console.log("user name is " + user_object.firstName);

                that.setState({
                    user_object: user_object,
                    user_avatar: user_object.avatar,
                    user_first_name: user_object.firstName,
                    user_last_name: user_object.lastName,
                    user_email: user_object.email,
                });

            }
        }).catch(error => console.log(error));
};


/**
 * Render the 'my account' page.
 * @returns {*the account page.*}
 */
render() {
    return (
        <View style={styles.container}>

            <TouchableOpacity
                style={styles.imageView}
                onLongPress={()=>{this.alertElement()}}
            >

                <Image style={styles.image}
                       source={({uri: this.state.user_avatar})}
                />
            </TouchableOpacity>

            <View>
                <Text> Username: {this.state.user_first_name} {this.state.user_code} </Text>

                <Text> Email: {this.state.user_email} </Text>
                <Text>City: </Text>
            </View>
            <View>


                <Button
                    title={"Logout"}
                    onPress={() => this.signUserOut()}
                />
            </View>
        </View>
    );
}
}

//TODO move this to the styleSheet package.
export default GlobalAccount;

const styles = StyleSheet.create({
container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
},
imageView :{
    height:100,
    width:100,
},
image: {


    flex:1,
}

});

包.json 文件

 {
  "name": "testProject",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest"
  },
  "dependencies": {
    "expo": "^31.0.6",
    "expo-font": "^1.0.0",
    "firebase": "^5.0.3",
    "react": "^16.4.1",
    "react-native": "0.55.4",
    "react-native-action-button": "^2.8.4",
    "react-native-elements": "^0.19.1",
    "react-native-navigation": "^1.1.483",
    "react-native-vector-icons": "^4.6.0",
    "react-navigation": "^2.0.2410"
  },
  "devDependencies": {
    "@expo/vector-icons": "^8.0.0",
    "babel-jest": "23.4.2",
    "babel-preset-react-native": "4.0.0",
    "jest": "23.4.2",
    "react-test-renderer": "16.4.1"
  },
  "jest": {
    "preset": "react-native"
  }
}

纱线检查 说

yarn check v1.9.2 info fsevents@1.2.4：平台“win32”与该模块不兼容。info "fsevents@1.2.4" 是一个可选的依赖项并且兼容性检查失败。从安装中排除它。错误“react-native#react@16.3.1”不满足找到的“react@16.6.3”匹配错误“expo#expo-react-native-adapter#react-native@^0.57.1​​”不满足满足“react-native@0.55.4”错误“expo#react-native-reanimated#react@16.0.0-alpha.6”的找到匹配项不满足“react@16.6.3”错误“expo”的找到匹配项#react-native-reanimated#react-native@^0.44.1" 不满足 "react-native@0.55.4" 警告 "jest-cli#jest-message-util#@babel/code-frame 的发现匹配@^7.0.0-beta.35" 可以从 "7.0.https://yarnpkg.com/en/docs/cli/检查有关此命令的文档。

标签： react-nativebabel-core

解决方案

经过半个多月的宕机，我发现了问题所在。不知怎的，我实际上并没有使用（正确的）世博会！？这是我修复它的方法。我的解决方案可能有些麻烦，我认为有一个更快的解决方案，但它确实有效。

您可以通过执行以下操作来检查您的应用程序是否使用 expo：yarn start。如果在命令行中没有二维码，则不要使用（正确的）Expo。

怎么解决？

  1. 安装 npm create-react-native-app
  2. 在第 2 步通过 create-react-native-app [应用程序名称] 创建一个新项目，
    这对我来说是错误的，因为这个版本实际上创建了 react-native 和 Expo 的组合。我显然使用了其他东西
    （您可以选择带有或不带有反应导航的示例应用程序。这个选择并不重要。）
  3. cd [应用程序名称] 然后 yarn start。
    确保您在命令行中看到 QR 码。否则它不使用正确的博览会。

  4. 我现在将我的旧项目复制到这个新项目中。（您也可以将新制作的文件复制到旧文件中，但是这样做时遇到了问题，因为我的旧项目中的各种 expo 依赖项都出错了。

  5. （非强制性）在目标设备上下载 Expo 应用程序 ( android )。expo 应用程序可以使用 QR 码打开您的应用程序。（仅使用 android 测试过）

如果您知道如何更快地解决此问题/无需将整个项目复制到新项目，我想听听您的意见。

推荐阅读