react-native - 将 react-native 组件与 vue-native 结合使用
问题描述
有没有什么办法可以将像https://github.com/archriss/react-native-snap-carousel/tree/master/example这样的原生组件与 vue native 结合起来?
我在 vue-native 中有一个项目,想在其中使用 react-native 组件,但是我有一个我不明白的错误:控制台说:Invariant Violation: expected a string (for built-in components) or a class/function (for composite components) but got: undefined
<template>
<nb-container>
<nb-content>
<carousel
:data="similarEventsData"
:renderItem="_renderItem"
:sliderWidth="sliderWidth"
:itemWidth="itemWidth"
:inactiveSlideScale="0.95"
:inactiveSlideOpacity="1"
:enableMomentum="true"
:activeSlideAlignment="'start'"
:containerCustomStyle="stylesObj.slider"
:contentContainerCustomStyle="stylesObj.sliderContentContainer"
:activeAnimationType="'spring'"
:activeAnimationOptions="{ friction: 4, tension: 40 }"
/>
</nb-content>
</nb-container>
</template>
<script>
import { Dimensions, Platform, Share } from "react-native";
import Carousel from 'react-native-snap-carousel';
import { scrollInterpolators, animatedStyles } from '../../utils/animations';
const { width: viewportWidth, height: viewportHeight } = Dimensions.get('window');
const slideHeight = viewportHeight * 0.36;
const slideWidth = wp(75);
const itemHorizontalMargin = wp(2);
export default {
components: { carousel: Carousel },
computed: {
similarEventsData () {
return [1, 2, 3]
}
},
data: function() {
return {
sliderWidth: viewportWidth,
itemWidth: slideWidth + itemHorizontalMargin * 2,
stylesObj: {
slider: {
marginTop: 15,
overflow: 'visible'
},
sliderContentContainer: {
paddingVertical: 10
},
}
};
},
methods: {
_renderItem ({item, index}) {
return <Text>fsd</Text>;
},
},
};
</script>
我希望渲染一个组件但没有运气
解决方案
这个问题大约有 2 年的历史了,我认为在那个时候开发人员添加了这样做的功能,如果有人遇到这个问题并遇到这个帖子,这就是该怎么做:
来自博览会矢量图标的 Entypo 图标包示例:
<script>
import { Entypo } from '@expo/vector-icons';
export default {
data(){
components: { Entype }
}
}
</script>
然后在模板中:
<template>
<entypo />
</template>
推荐阅读
- python - 如何从单元测试中模拟.patch 库函数
- node.js - 使用 Okta OIDC 中间件时出现“错误:状态不匹配,无法在会话中找到状态”
- smartcard - Javacard 外形规格
- python-3.x - “没有这样的文件或目录” - 但我要打开的文件就在那里
- c# - 无法排序,因为 IComparer.Compare() 方法返回不一致的结果。再次
- apache-spark - Pyspark 正确倾斜数据加盐技术示例代码
- c# - 2 如何通过在输入中使用“FlightStopsAsConnections”、“MaxStopsQuantity”或“DirectFlightsOnly”在 BargainFinderMax(REST 模式)中仅获取直飞航班
- pine-script - Pine-script SECURITY 函数不返回一致的结果
- rust - 如何仅在文档测试期间将例程标记为 pub?
- javascript - 在溢出表中粘贴表行和标题