Как вернуть компонент React-Native в Vue-Native методе

08.05.2019 03:43:59 Просмотров 106 Источник

Я пишу приложение с Vue-Native и в моем случае использую React-Native компонент, который использует функцию prop renderItemвозвращающую React-Native элемент (например. <View>)

У меня вю элемент wineCard, которую я должна вернуть эту функцию

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

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

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

У вопроса есть решение -

Ответы - Как вернуть компонент React-Native в Vue-Native методе / How to return React-Native Component in Vue-Native method

Ashley van Laer

08.08.2019 03:13:34

Вы можете вернуть компонент React-Native в Vue-Native, сделав a .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`.
      <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>
    );
  }
};

Вид / Дом.Вю:

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

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

Источник

Помочь в развитии проекта:

Как вернуть компонент React-Native в Vue-Native методе

Ответы - Как вернуть компонент React-Native в Vue-Native методе / How to return React-Native Component in Vue-Native method

Другие вопросы

Ответы на ваши вопросы