React natif, composants dans un composant dans un composant personnalisé

Question

<Image source={this.props.imageSource} style={this.props.styles}> 
     <View style={styles.main0}> 
      <Animated.View {...this.panResponder.panHandlers} style={[styles.view0, animatedStyle]} /> 
      <View style={styles.view1} /> 
      <View style={styles.view2} /> 
      <View style={styles.view3} /> 
     </View> 
     <Text style={{color: 'white', textAlign: 'center'}}>{this.state.text}</Text> 
</Image> 

C'est le code d'origine, mais je ne veux pas utiliser l'image, je veux le placer dans le composant que l'utilisateur met dans le composant.

si

<CircleDragMenu> 
    <View /> 
</CircleDragMenu> 

retour du

<View> 
    x code 
</View> 

exemple 2

si

<CircleDragMenu> 
    <TouchableHighlight /> 
</CircleDragMenu> 

retour le

<TouchableHighlight> 
    same x code 
</TouchableHighlight> 

Comment puis-je y parvenir?

Answer 1

ce que j'ai compris par vous question. il même que la façon dont vous la coutume maquette à l'intérieur comp `

import React, { Component } from "react"; 
import { View, Text, StyleSheet,TouchableHighlight } from "react-native"; 

// create a component 
class TouchableHighlightComponent extends Component { 
    constructor(props) { 
    super(props); 
    } 
    render() { 
    return (
     <TouchableHighlight> 
     <Text>some text</Text> 
     </TouchableHighlight> 
    ); 
    } 
} 

//make this component available to the app 
export default TouchableHighlightComponent; 

`

vous utilisez comme cette `

import TouchableHighlightComponent from '../test' 
render() { 
    return (
     <View> 
     <TouchableHighlightComponent/> 
     </View> 
    ); 
    } 

`

Answer 2

Je veux un

import TouchableHighlightComponent from '../test' 
render() { 
    return (
     <View> 
      <TouchableHighlightComponent> 
       <Image /> 
      </TouchableHighlightComponent> 
     </View> 
    ); 
    } 

et je vais retourner le

class TouchableHighlightComponent extends Component { 
    constructor(props) { 
    super(props); 
    } 
    render() { 
    return (
     <TouchableHighlight> 
     <this.props.children> 
      <Text>test</Text> 
     </this.props.children> 
     </TouchableHighlight> 
    ); 
    } 
}