反応ネイティブタイプのチェックコンポーネント

Question

私は、2種類のコンポーネントを処理できるようにしたいコンポーネントがあります。 1つはTextコンポーネントで、もう1つはImageコンポーネントです。

私は両方のコンポーネントにそれを適用できるようにしたい色のようないくつかのデフォルトスタイルを持っていますが、テキストエレメントはそのスタイルで色のキーを使用できますが、ImageではtintColorキー。

それぞれの要素に適切なスタイルを設定できるように、どの要素があるかを確認する方法はありますか？

Answer 1

私が正しく理解している場合、あなたは3つのスタイルがこのようにそれを処理するためにオブジェクトを使用することができます：上記のコードは、タイプミスがあるかもしれないことを

const styles = StyleSheet.create({ 
    default: { marginTop: 10, borderWidth: 1 }, 
    onlyButton: { borderColor: '#F0F' }, 
    onlyText: { borderColor: '#C9F' }, 
}) 

<Text style={[styles.default, styles.onlyText]} /> 
<TouchableOpacity={[styles.default, styles.onlyButton]} /> 

は注意、それはアイデアを表示するだけの例です。

私が助けてくれたのか、あなたの質問に誤解した場合は教えてください。

は、それはあなたが多くのコンポーネントは、いくつかの公式のものも含めて、そのような行動を持って見つけることができます

Answer 2

に役立ちます願っています。

たとえば、<ScrollView />とstyleとcontentContainerStyleとindicatorStyleです。その後、

<CompositeComponent 
    style={{backgroundColor: 'red'}} 
    textStyle={{color: 'black'}} 
    imageStyle={{tintColor: 'black'}} 
    /> 

とあなたのrender()機能では、

render() { 
    return (
    <View> 
     <Text style={{[this.props.style, this.props.textStyle]}} /> 
     <Image style={{[this.props.style, this.props.imageStyle]}} /> 
    </View> 
); 
} 

こう<Text />と<Image />同じstyleを共有し、textStyleまたはimageStyleでそれぞれを上書き：あなたのコンポーネントの場合

、それができます。