如何在 Vue-Native 方法中返回 React-Native 组件答案

【问题标题】：How to return React-Native Component in Vue-Native method如何在 Vue-Native 方法中返回 React-Native 组件
【发布时间】：2019-05-08 12:43:59
【问题描述】：

我使用 Vue-Native 编写应用程序，在我的情况下，我使用 React-Native 组件，它使用 prop 函数 renderItem 返回 React-Native 元素（例如 <View>）

我有 Vue 元素 wineCard，我应该在这个函数中返回它

在 React 中，这个函数看起来像这样：

  renderItem = ({ item, index, move, moveEnd, isActive }) => {
    return (
      <TouchableOpacity
        onLongPress={move}
        onPressOut={moveEnd}
      >
      <wineCard wineItem={item} />
      </TouchableOpacity>
    )
  }

如何使用 Vue-Native 来完成？

【问题讨论】：

标签： javascript react-native vue.js vue-native

【解决方案1】：

您可以在 Vue-Native 中返回一个 React-Native 组件，方法是创建一个包含 React-native 组件的 .js 文件，并将其放在 Vue-Native 应用程序的 Components 目录中。

例如：

组件/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`.
      <View style={{flex: 1, flexDirection: 'row'}}>
        <View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
        <View style={{width: 50, height: 50, backgroundColor: 'skyblue'}} />
        <View style={{width: 50, height: 50, backgroundColor: 'steelblue'}} />
      </View>
    );
  }
};

Views/Home.Vue：

<template>
  <view>
    <Flex/>>
  </view>
</template>
 <script>
  import Flex from '.././Components/flex.js'

  export default {
    components:{Flex}
  }
</script>

【讨论】：