web-dev-qa-db-ja.com

カスタムの作成方法React子ノードを持つネイティブコンポーネント

React TouchableOpacityやTextなどの他のコンポーネントで構成される純粋なJavaScriptのネイティブコンポーネントを作成します。この2つのコンポーネントで構成されるボタンがアプリにいくつかあるので、コードの再利用性を高めるために独自のコンポーネントを作成する方法を学ぶのはいいことです。

完成したコンポーネントは、だいたい次のようになります。

<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ネイティブコンポーネントがあることを知っていますが、この種のカスタムを構築する方法を学ぶために、独自に作成することを好みますまた、React Nativeは素晴らしいですが、ドキュメントでこのようなものを構築する方法を見つけることができません。Reactを始める人にとって、これは非常に興味深い演習だと思います。

reactjsecmascript-6react-native
11
amb

This.props.childrenを介して内部テキストにアクセスでき、手動で（this.propsを介して）または...演算子を使用してプロパティを渡すことができます。詳細は、react.jsドキュメントで説明されています（注-React Native docs！ではありません）。ドキュメントの最も関連する部分は次のとおりです。

これは、Reactネイティブドキュメントの一般的なアプローチであり、すべての反応概念を説明するのではなく、Reactネイティブパーツのみを説明し、実際の概念はWeb/Reactのオリジナルバージョン。

20
Jarek Potiuk

このリポジトリを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...)は、子コンポーネントを処理するためのキーです。

1
Bruce Lee