Vue Native：'不变违规'答案

【问题标题】：Vue Native: 'Invariant Violation'Vue Native：'不变违规'
【发布时间】：2018-12-13 05:41:35
【问题描述】：

我正在尝试使用 Vue Native 启动并滚动，每当我尝试导航到初始屏幕之外时都会遇到相同的错误

警告：React.createElement：类型无效——需要一个字符串（对于内置组件）或类/函数（对于复合组件）但得到：未定义。您可能忘记导出您的来自定义它的文件中的组件，或者您可能混淆了默认和命名导入。

 Check the render method of ReactVueComponent.
 in ReactVueComponent (at SceneView.js:17)
 in SceneView (at CardStack.js:466)
 in RCTView (at View.js:60)
 in View (at createAnimatedComponent.js:154)
 in AnimatedComponent (at Card.js:12)

在我的目录中搜索ReactVueComponent 时，它不存在，SceneView.js 也不存在，RCTCView 等也不存在。我的猜测是因为它们是通过代码编译生成的？

我的路由器index.vue设置如下

<template>
    <root>
      <app-navigation></app-navigation>
    </root>
</template>


<script>
import React from "react";
import { StackNavigator, navigationService } from "vue-native-router";
import { Root } from "native-base";
import WelcomeScreen from "./screen/WelcomeScreen.vue";
import HomeScreen from "./screen/home.vue";

const AppNavigation = StackNavigator(
  {
    Welcome: { screen: WelcomeScreen },
    Home: { screen: HomeScreen }
  },
  {
    initialRouteName: "Welcome",
    headerMode: "none"
  }
);
export default {
  components: { Root, AppNavigation }
};
</script>

我的WelcomeScreen 组件（正确加载。按钮在按下时会引发错误）

<template>
      <nb-content padder>
        <nb-form>
          <view :style="{marginTop:300}">
            <nb-button block :on-press="login">
              <nb-text>Login</nb-text>
            </nb-button>
          </view>
      </nb-content>
</template>

<script>
import { Dimensions, Platform, AsyncStorage } from "react-native";
import { NavigationActions } from "vue-native-router";

export default {
  props: {
    navigation: {
      type: Object
    }
  },
  methods: {
    login() {
      this.navigation.navigate("Home");
    }
  }
};
</script>

HomeScreen 组件，渲染失败：

<template>
    <nb-container :style="{flex:1, backgroundColor: '#fff'}">
        <nb-header>  
            <nb-body>
                <nb-title>title</nb-title>
            </nb-body> 
        </nb-header>
        <nb-content>
            <nb-list>
                <li>thing 1</li>
                <li>thing 2</li>
                <li>thing 3</li>
            </nb-list>
        </nb-content>
    </nb-container>
</template>

<script>
import React from "react";
import { Dimensions } from "react-native";

const SCREEN_WIDTH = Dimensions.get("window").width;

export default {
  props: {
    navigation: Object
  }
};
</script>

对此的任何提示将不胜感激。 Vue Native 上还没有太多，我已经尽我所能地尝试遵循我见过的几个例子。双重和三重检查了我的依赖项，它们似乎都已到位。

【问题讨论】：

标签： react-navigation expo vue-native

【解决方案1】：

似乎您正在使用不受支持的<li> 标签。如果您检查本机基础文档。在nb-list 中使用的正确标签是nb-list-item。 http://docs.nativebase.io/Components.html#list-def-headref

【讨论】：