Question

在我的本机应用程序中使用Expo时出现错误。导入以下代码时。（我的代码中只有一部分使用了导入“ expo”）

import {Permissions, ImagePicker} from 'expo';

我得到一个错误。我整天都在寻找解决方案。我认为是因为我使用的React版本已更新？我尝试了this post，但没有成功，甚至出现了更多错误。还删除了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：\ stack \ Github \ turfMeister \ testProject \ node_modules @ babel \ plugin-proposal-decorators \ node_modules @ babel \ helper-plugin-utils \ lib \ index.js：13：11）在_default（E：\ stack \ Github \ turfMeister \ testProject \ node_modules @ babel \ plugin-proposal-decorators \ lib \ index.js：35：7）在E：\ stack \ Github \ turfMeister \ testProject \ node_modules @ babel \ plugin-proposal-decorators \ node_modules @ babel \ helper-plugin-utils \ lib \ index.js：19：12 在Function.memoisePluginContainer（E：\ stack \ Github \ turfMeister \ testProject \ node_modules \ babel-core \ lib \ transformation \ file \ options \ option-manager.js：113：13）在Function.normalisePlugin（E：\ stack \ Github \ turfMeister \ testProject \ node_modules \ babel-core \ lib \ transformation \ file \ options \ option-manager.js：146：32）在E：\ stack \ Github \ turfMeister \ testProject \ node_modules \ babel-core \ lib \ transformation \ file \ options \ option-manager.js：184：30 在Array.map（）在Function.normalisePlugins（E：\ stack \ Github \ turfMeister \ testProject \ node_modules \ babel-core \ lib \ transformation \ file \ options \ option-manager.js：158：20）在OptionManager.mergeOptions（E：\ stack \ Github \ turfMeister \ testProject \ node_modules \ babel-core \ lib \ transformation \ file \ options \ option-manager.js：234：36）在E：\ stack \ Github \ turfMeister \ testProject \ node_modules \ babel-core \ lib \ transformation \ file \ options \ option-manager.js：265：14 在E：\ stack \ Github \ turfMeister \ testProject \ node_modules \ babel-core \ lib \ transformation \ file \ options \ option-manager.js：323：22 在Array.map（）在OptionManager.resolvePresets（E：\ stack \ Github \ turfMeister \ testProject \ node_modules \ babel-core \ lib \ transformation \ file \ options \ option-manager.js：275：20）在OptionManager.mergePresets（E：\ stack \ Github \ turfMeister \ testProject \ node_modules \ babel-core \ lib \ transformation \ file \ options \ option-manager.js：264：10）在OptionManager.mergeOptions（E：\ stack \ Github \ turfMeister \ testProject \ node_modules \ babel-core \ lib \ transformation \ file \ options \ option-manager.js：249：14）在OptionManager.init（E：\ stack \ Github \ turfMeister \ testProject \ node_modules \ babel-core \ lib \ transformation \ file \ options \ option-manager.js：368：12）在File.initOptions（E：\ stack \ Github \ turfMeister \ testProject \ node_modules \ babel-core \ lib \ transformation \ file \ index.js：212：65）在新文件中（E：\ stack \ Github \ turfMeister \ testProject \ node_modules \ babel-core \ lib \ transformation \ file \ index.js：135：24）在Pipeline.transform（E：\ stack \ Github \ turfMeister \ testProject \ node_modules \ babel-core \ lib \ transformation \ pipeline.js：46：16）在Object.transform（E：\ stack \ Github \ turfMeister \ testProject \ node_modules \ metro \ src \ transformer.js：135：5）在Object.transformCode [转换时]（E：\ stack \ Github \ turfMeister \ testProject \ node_modules \ metro \ src \ JSTransformer \ worker \ index.js：253：15）在execMethod（E：\ stack \ Github \ turfMeister \ testProject \ node_modules \ jest-worker \ build \ child.js：92：29）在process.on（E：\ stack \ Github \ turfMeister \ testProject \ node_modules \ jest-worker \ build \ child.js：42：7）

整个组件：

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,
}

});

Package.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"
  }
}

纱线检查提示

纱线检查v1.9.2 信息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.0-rc.2”重复删除为“ @babel \ code-frame @ 7.0.0-rc.2“ 错误“ babel-preset-expo＃metro-react-native-babel-preset＃@ babel / core @ *”不满足找到的“ @babel \ core@7.0.0-rc.2”匹配项错误“ @ babel / plugin-proposal-decorators＃@ babel / helper-create-class-features-plugin ## @ babel/core@^7.0.0”不满足找到的“ @babel \ core@7.0”匹配。 0-rc.2“ 错误发现6个错误。信息请访问https://yarnpkg.com/en/docs/cli/check，以获取有关此命令的文档。

Answer 1

沮丧了半个多月后，我发现了问题所在。不知何故我实际上没有使用过（正确的）Expo ！？这是我固定的方法。我的解决方案可能有些麻烦，我认为有一个更快的解决方案，但是可以。

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

如何解决？

安装npm create-react-native-app
通过create-react-native-app [应用名称]创建一个新项目
在第2步中，我错了，因为此版本实际上创建了react-native和Expo的组合。我显然还用了其他东西
（您可以选择是否带有无反应导航的示例应用程序。此选择不会消失。）
cd [应用名称]，然后启动yarn。
确保在命令行中看到QR码。否则，不不使用正确的博览会。
我现在将我的旧项目复制到了这个新项目中。（您也可以将新创建的文件复制到旧文件中，但是我遇到了问题，因为旧项目中的所有expo依赖关系都不对。
（不是必需的），在目标设备上下载Expo应用程序（android）。博览会应用程序可以使用QR码打开您的应用程序。（仅在android上进行过测试）

如果您知道如何更快地解决此问题/无需将整个项目复制到一个新项目中，我希望收到您的来信。

反应本机绑定失败：错误：需要Babel“ ^ 7.0.0-0”，但已加载“ 6.26.3”

1 个答案: