Я пишу приложение с помощью Vue-Native, и в моем случае я использую компонент React-Native, который использует функцию поддержки renderItem возвращающую элемент React-Native (например, {amp}lt;View{amp}gt; )

У меня есть элемент Vue wineCard , который я должен вернуть в этой функции

В React эта функция выглядит примерно так:

  renderItem = ({ item, index, move, moveEnd, isActive }) ={amp}gt; { return ( {amp}lt;TouchableOpacity onLongPress={move} onPressOut={moveEnd} {amp}gt; {amp}lt;wineCard wineItem={item} /{amp}gt; {amp}lt;/TouchableOpacity{amp}gt; ) } 

Как это можно сделать с помощью Vue-Native?

Вы можете вернуть компонент React-Native в Vue-Native, создав файл .js с компонентом React-native и поместив его в каталог компонентов в приложении Vue-Native.

например:

Компоненты / flex.js:

 import React, { Component } from 'react'; import { View } from 'react-native'; export default class FlexDirectionBasics extends Component { render() { return ( // Try setting `flexDirection` to `column`. {amp}lt;View style={{flex: 1, flexDirection: 'row'}}{amp}gt; {amp}lt;View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} /{amp}gt; {amp}lt;View style={{width: 50, height: 50, backgroundColor: 'skyblue'}} /{amp}gt; {amp}lt;View style={{width: 50, height: 50, backgroundColor: 'steelblue'}} /{amp}gt; {amp}lt;/View{amp}gt; ); } }; 

Просмотров / Home.Vue:

 {amp}lt;template{amp}gt; {amp}lt;view{amp}gt; {amp}lt;Flex/{amp}gt;{amp}gt; {amp}lt;/view{amp}gt; {amp}lt;/template{amp}gt; {amp}lt;script{amp}gt; import Flex from '.././Components/flex.js' export default { components:{Flex} } {amp}lt;/script{amp}gt;