2

我正在尝试使用 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 上还没有太多，我已经尽我所能地尝试遵循我见过的几个例子。双重和三重检查了我的依赖项，它们似乎都已到位。

4

1 回答 1

0

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

于 2018-08-24T07:54:33.090 回答