Vue Native使用本地定义组件问题

Question

我正在进行Vue Native的测试。熟悉原生iOS和Android开发，以及web/spa环境下的Vuejs。我想我会给Vue Native一个机会，看看在我们的一些较小的项目中使用它。我遇到了一个问题，刚刚开始。请参考下面的步骤重现我遇到的问题。

创建一个新项目:

vue-native init vuenativetest --no-expo

然后我遵循基本的hello world指令:https://vue-native.io/getting-started.html

react-native run-ios --simulator "iPhone 11"//works fine

然后我跳过去从这里建立一个我自己的基本组件，但试图"组织"一些最初的代码。https://vue-native.io/docs/composing.html

createcomponents/HeaderTest.vue

<template>
<div>Hello Header</div>
</template>
<script>
export default {
name: "HeaderTest.vue"
}
</script>
<style scoped>
</style>

App.vue

<template>
<view class="container">
<header-test />
<text class="text-color-primary">{{ message }}</text>
<button title="Press me!" @press="exclaim" />
</view>
</template>
<script>
import HeaderTest from "./components/HeaderTest";
export default {
components: { HeaderTest },
data() {
return {
message: "Hello World"
};
},
methods: {
exclaim() {
this.message += "!";
}
},
};
</script>
<style>
.container {
flex: 1;
background-color: white;
align-items: center;
justify-content: center;
}
.text-color-primary {
color: blue;
font-size: 30px;
}
</style>

react-native run-ios --simulator "iPhone 11"//启动，但看到以下错误

不变量冲突:元素类型无效:期望字符串(for)内置组件，但未定义)。您可能忘记了导出从定义它的文件中找到组件，或者混合使用启动默认的和命名的inports....

还请注意，我也尝试过将其移到目录的根目录中，但没有成功。

我在这里做错了什么?提前感谢您的指导。

edit:创建了一个git仓库，如果有人想看到所有的代码:https://github.com/djneely/vuenativetest

Answer 1

似乎你正在使用不支持的div标签。正确的标签应该是text或view。https://vue-native.io/docs/basic-components.html

Answer 2

谢谢。看来我对这里的反应很陌生。根据你的评论。我更新了HeaderTest代码，现在状态很好。谢谢!

<template>
<view>
<text>Hello Header</text>
</view>
</template>