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

Posted 2023-02-22

【中文标题】如何使用子节点创建自定义 React Native 组件

【英文标题】：How to create custom React Native components with child nodes

【发布时间】：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 开始的人来说，这是一个非常有趣的练习。

【参考方案1】：

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

http://facebook.github.io/react/docs/multiple-components.html https://facebook.github.io/react/docs/components-and-props.html

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;