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>

这是原始代码，但我不想使用Image，我想将它放在用户放入组件的组件中。

如果

<CircleDragMenu>
   <View />
</CircleDragMenu>

返回

<View>
     x code
</View>

示例2

如果

<CircleDragMenu>
     <TouchableHighlight />
</CircleDragMenu>

返回

<TouchableHighlight>
     same x code
</TouchableHighlight>

我怎样才能做到这一点？

Answer 1

我所理解的问题。它与你在comp中定制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;

`

你是这样使用的 `

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>
    );
  }
}

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

2 个答案: