如何在vue-native中制作webview

Question

我正在尝试使用 vue-native-cli 制作 webview 应用程序

我正在尝试在 documents

的帮助下使用网络视图组件

这是我的页面

<template>
    <web-view
        :source="'https://google.com'"
        :style="{marginTop: 20}"
    />
</template>

<script>
export default {
  methods: {

  }
}
</script>
<style>

</style>

当我使用

<view class="text-container">
        <text>Hello World</text>
    </view>

它工作正常但在 webview 中获取

不变破坏：元素类型无效

Answer 1

你必须先导入 WebView

import { WebView } from "react-native";
export default {
    components: {
      'web-view': WebView
    },
};

<template>
    <web-view
        :source="'https://google.com'"
        :style="{marginTop: 20}"
    />
</template>

Answer 2

似乎 React Native 的某些部分已经在后台发生了变化，而 Vue Native 文档尚未更新以解决这个问题。截至 2020 年 3 月的答案：

通过expo install react-native-webview
导入您的组件
确保您的 :source 道具将 uri 作为对象传递：

<template>
    <web-view :source="{uri:'https://google.com'}" />
</template>

<script>
import { WebView } from "react-native-webview";

export default {
  name: "myComponent",
  components: {
    "web-view": WebView
  }
};
</script>

如何在vue-native中制作webview

how to make webview in vue-native

vue-native