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

【问题标题】：How to create custom React Native components with child nodes如何使用子节点创建自定义 React Native 组件
【发布时间】：2015-11-22 19:13:46
【问题描述】：

我想用纯 JavaScript 创建一个 React Native 组件，由 TouchableOpacity 和 Text 等其他组件组成。我的应用中有几个按钮由这两个组件组成，所以我认为学习如何创建自己的组件以更好地重用代码会很好。

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

<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 开始的人来说，这是一个非常有趣的练习。

【问题讨论】：

标签： reactjs ecmascript-6 react-native

【解决方案1】：

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

React Native 文档的一般方法不是描述所有 React 概念，而是仅描述 React Native 部分，而实际概念在 React 的 Web/原始版本中描述。

【讨论】：

我想我应该开始阅读更多的 React 文档，我不知道他们对 react-native 也有非常有用的信息。不过还是有道理的！
正确！我认为这对于来自 React 方面的 Facebook 工程师来说是显而易见的，但对于来自移动开发并希望同时使用 react-native 和 react 模式/环境的人来说根本不是。

【解决方案2】：

你可以从 github 上查看这个 repo：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...)是处理子组件的关键。

【讨论】：

【解决方案3】：

对我来说，我只是将子组件放入组件中并收工。还要记住，iOS 和 Android 之间有时会有不同的实现。这是我刚刚编写并简要测试过的内容

import React, { FunctionComponent } from "react";
import { TouchableNativeFeedback, Platform, TouchableOpacity } from "react-native";


interface IAgnoButton {
    onPress: (item: any) => void,
    style: object
}

const AgnoButton: FunctionComponent<IAgnoButton> = (props) => {
    return (
        Platform.OS === 'android' ?
            <TouchableNativeFeedback
                onPress={props.onPress}
                style={{ ...props.style }}
                >
                { props.children }
            </TouchableNativeFeedback> :
            <TouchableOpacity
                onPress={props.onPress}
                style={{ ...props.style }}
                >
                { props.children }
            </TouchableOpacity>
    );
}
export default AgnoButton;

【讨论】：