如何使用子节点创建自定义React Native组件

我想在纯JavaScript中创建一个React Native组件，该组件由其他组件组成，如TouchableOpacity和Text。我的应用程序中有几个按钮由两个组件组成，因此我认为如果要创建自己的组件以更好地重用代码将会很好。如何使用子节点创建自定义React Native组件

完成的组件应该或多或少是这样的：

<Button> 
    Tap me! 
</Button>

这是我对组件迄今已取得的代码：

class Button extends Component { 
    render() { 
    <TouchableOpacity style={styles.button}> 
     <Text style={styles.textButton}> 
     </Text> 
    </TouchableOpacity> 
    } 
};

不过，我不知道如何我可以在组件中使用Tap me!内部子文本，但我并没有真正了解如何让我的组件接受自定义道具以及道具和TouchableOpacity和Text道具。

PS：我知道有一些像这样的React Native组件，但我更愿意创建我自己的以便了解如何构建这种自定义组件。此外，React Native非常棒，但我无法找到如何在他们的文档中构建这样的事情，我认为对于以React开始的人来说这是一个非常有趣的练习。

来源

2015-08-28 amb

您可以通过this.props.children访问内部文本，您可以手动（通过this.props）或使用...运算符传递属性。更多内容在react.js文档中有所描述（注意 - 不是React Native文档！）。文档最相关的部分是：

它的阵营本地文档，与其描述的所有反应概念的一般方法，他们只描述的阵营本地部分和实际的概念在Web/React原始版本中描述。

来源

2015-08-29 13:42:06

我想我应该开始阅读更多的React文档，我不知道他们有非常有用的信息反应原生也。这很有道理！ – amb

正确！我认为对于来自React方面的Facebook工程师来说，这一点很明显，但对于来自移动开发人员并且不想同时使用react-native和react pattern/environment的人来说，这一点显而易见。 –

你可以从GitHub签这个回购：https://github.com/future-challenger/react-native-tabs

一些代码在这里：

<View style={[styles.tabbarView, this.props.style, this.state.keyboardUp && styles.hidden]}> 
    {React.Children.map(this.props.children.filter(c=>c),(el)=> 
    <TouchableOpacity key={el.props.name + "touch"} 
     testID={el.props.testID} 
     style={[styles.iconView, this.props.iconStyle, (el.props.name || el.key) == selected ? this.props.selectedIconStyle || el.props.selectedIconStyle || {} : {} ]} 
     onPress={()=>!self.props.locked && self.onSelect(el)} 
     onLongPress={()=>self.onSelect(el)} 
     activeOpacity={el.props.pressOpacity}> 
      {selected == (el.props.name || el.key) ? React.cloneElement(el, {selected: true, style: [el.props.style, this.props.selectedStyle, el.props.selectedStyle]}) : el} 
    </TouchableOpacity> 
)}

React.Children.map(this.props.children.filter...)是应对儿童组件的关键。

来源

2016-10-09 01:17:12

如何使用子节点创建自定义React Native组件

回答

相关问题