React Native，自定义组件中的组件组件

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> 

它是原始代码，但我不想使用该图像，我想将它放在用户放入组件的组件内。

如果

<CircleDragMenu> 
    <View /> 
</CircleDragMenu> 

回报

<View> 
    x code 
</View> 

例2

如果

<CircleDragMenu> 
    <TouchableHighlight /> 
</CircleDragMenu> 

回报

<TouchableHighlight> 
    same x code 
</TouchableHighlight> 

我该如何做到这一点？

Answer 1

我明白你的问题。它同我里面比较 `

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; 

`

你使用这样 `

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

`

Answer 2

如何定制补偿需要一个

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

，我将返回

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