admin管理员组文章数量:1323723
I made the first process of installation of vue-native, and I'm following the "Getting Started" Hello world tutorial (.html), but the App.vue
is never executed, only the App.js
. If I remove the App.js
I get an error:
"Unable to resolve "../../App" from "node_modules\expo\AppEntry.js""
How can I fix this problem to make it work and follow the tutorial with any problem?
Folder Structure:
App.js
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
export default class App extends React.Component {
render() {
return (
<View style={styles.container}>
<Text>Open up App.js to start working on your app!</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
App.vue
<template>
<view class="container">
<text class="text-color-primary">My Vue Native App</text>
</view>
</template>
<style>
.container {
background-color: white;
align-items: center;
justify-content: center;
flex: 1;
}
.text-color-primary {
color: blue;
}
</style>
Thank you
I made the first process of installation of vue-native, and I'm following the "Getting Started" Hello world tutorial (https://vue-native.io/getting-started.html), but the App.vue
is never executed, only the App.js
. If I remove the App.js
I get an error:
"Unable to resolve "../../App" from "node_modules\expo\AppEntry.js""
How can I fix this problem to make it work and follow the tutorial with any problem?
Folder Structure:
App.js
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
export default class App extends React.Component {
render() {
return (
<View style={styles.container}>
<Text>Open up App.js to start working on your app!</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
App.vue
<template>
<view class="container">
<text class="text-color-primary">My Vue Native App</text>
</view>
</template>
<style>
.container {
background-color: white;
align-items: center;
justify-content: center;
flex: 1;
}
.text-color-primary {
color: blue;
}
</style>
Thank you
Share Improve this question edited Dec 16, 2018 at 21:16 Bak87 asked Dec 16, 2018 at 20:06 Bak87Bak87 2193 silver badges9 bronze badges 4- it would help if you post more info such as folder structure and your export statement on your app.js. from the error it is looking for a js file named AppEntry.js? so post your folder structure and a bit of information about how you installed vue and or created the app - like did you use vue-cli? – Jaya Commented Dec 16, 2018 at 21:05
- I have edited the question, I have added the App.js, App.vue and folder structure. – Bak87 Commented Dec 16, 2018 at 21:17
-
Sorry, am a bit confused here. Are you using
vue
orreact
? How did you wireup vue? did you use the vue-cli to create the app, I mean that is your get-started doc and upon following it, it works just fine – Jaya Commented Dec 17, 2018 at 18:57 - I'm using Vue, I just typed in the console "vue-native init <project-name>", and then I executed it with "npm start" – Bak87 Commented Dec 17, 2018 at 19:04
4 Answers
Reset to default 6Although the answers might work for some. There is another way to fix this issue without deleting any files. Navigate to the node modules folder. Search for the expo folder.
Open the AppEntry.js file. It should look like this:
import 'expo/build/Expo.fx';
import registerRootComponent from 'expo/build/launch/registerRootComponent';
import { activateKeepAwake } from 'expo-keep-awake';
import App from '../../App'; // we will change this!
if (__DEV__) {
activateKeepAwake();
}
registerRootComponent(App);
Modify Appentry.js to this:
import 'expo/build/Expo.fx';
import registerRootComponent from 'expo/build/launch/registerRootComponent';
import { activateKeepAwake } from 'expo-keep-awake';
import App from '../../App.vue'; // Will use App.vue as the entry point
if (__DEV__) {
activateKeepAwake();
}
registerRootComponent(App);
The following worked for me:
At first you delete app.js
This will give you an error, but don't worry. You will have to run the npm install
mand. After this, run vue-native again with npm start
This will run the app.vue file normally
Had a same issue. Below works for me
In app.json add
"sourceExts": [ "js", "json", "ts", "tsx", "jsx", "vue"]
Inside "packagerOpts"
"packagerOpts":
{ "sourceExts": [ "js", "json", "ts", "tsx", "jsx", "vue"],
"config": "metro.config.js"}
Read it from: https://github./GeekyAnts/vue-native-core/issues/117
If you are viewing on web browser(which isn't production ready), i think it will look for App entry file in this order js > json > vue. So i think it's impossible it will seek out App.vue.
For viewing on android phone, stop the Expo Dev Tools in terminal, delete App.js, then run npm start order
or npm run android
本文标签: javascriptVue native is always executing Appjs instead of vueStack Overflow
版权声明:本文标题:javascript - Vue native is always executing App.js instead of .vue - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742122585a2421788.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论