6

有没有什么办法可以将像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>

我希望渲染一个组件但没有运气

4

1 回答 1

0

这个问题大约有 2 年的历史了，我认为在那个时候开发人员添加了这样做的功能，如果有人遇到这个问题并遇到这个帖子，这就是该怎么做：

来自博览会矢量图标的 Entypo 图标包示例：

<script>
import { Entypo } from '@expo/vector-icons'; 

export default {
  data(){
    components: { Entype }
 }
}
</script>

然后在模板中：

<template>
<entypo />
</template>
于 2021-12-20T17:02:41.323 回答