0

我正在测试 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"// 工作正常

然后我从这里开始设置我自己的基本组件，但最初尝试“组织”代码。 https://vue-native.io/docs/composing.html

创造components/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"// 启动但看到以下错误

不变违规：元素类型无效：需要一个字符串（对于内置组件但得到：未定义）。您可能忘记从定义组件的文件中导出组件，或者您可能混淆了默认和命名的 inports...。

另请注意，我也尝试将其移出到目录的根目录中，但无济于事。

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

编辑：如果有人想查看所有代码，请创建一个 git repo：https ://github.com/djneely/vuenativetest

4

2 回答 2

1

好像您正在使用不受支持的 div 标签。正确的标签是文本或视图。https://vue-native.io/docs/basic-components.html

于 2021-02-15T19:57:44.000 回答
0

谢谢。看来我在这里 React 是新事物。根据您的评论。我更新了 HeaderTest 代码，现在状态良好。谢谢！

<template>
<view>
  <text>Hello Header</text>
</view>
</template>
于 2021-02-15T20:03:10.347 回答