Question

我想在纯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!内部子文本，而且我真的无法让我的组件接受自定义道具和{ {1}}和TouchableOpacity道具。

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

Answer 1

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

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

Answer 2

你可以从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...)是处理儿童成分的关键。

Answer 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;

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

3 个答案: