Vue Native: «Инвариантное нарушение» - PullRequest
Новая
       29

Vue Native: «Инвариантное нарушение»

0 голосов
/ 04 июля 2018

Я пытаюсь встать и катиться с 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 пока не так много, и я постарался следовать нескольким примерам, которые я видел, в меру своих возможностей. Дважды и трижды проверил мои зависимости, и все они, кажется, на месте.

1 Ответ

0 голосов
/ 24 августа 2018

Похоже, вы используете <li> теги, которые не поддерживаются. Если вы проверите родные базовые документы. Правильный тег для использования в nb-list - nb-list-item. http://docs.nativebase.io/Components.html#list-def-headref

...