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を始める人にとって、これは非常に興味深い演習だと思います。
This.props.childrenを介して内部テキストにアクセスでき、手動で(this.propsを介して)または...演算子を使用してプロパティを渡すことができます。詳細は、react.jsドキュメントで説明されています(注-React Native docs!ではありません)。ドキュメントの最も関連する部分は次のとおりです。
これは、Reactネイティブドキュメントの一般的なアプローチであり、すべての反応概念を説明するのではなく、Reactネイティブパーツのみを説明し、実際の概念はWeb/Reactのオリジナルバージョン。
このリポジトリを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...)
は、子コンポーネントを処理するためのキーです。