javascript - React Native: styling props.children - Stack Overflow

admin管理员组

文章数量:1332388

Let's imagine I have a Button Component. I can import it from different screens and it behaves independently. I can give it different children (text, image, text + icon, icon etc.).

This would look like something like that:

import React from 'react';
import { TouchableOpacity } from 'react-native';

import theme from '$/theme';

const styles = StyleSheet.create({
  button: {
    backgroundColor: 'red',
  },
  text: {
    fontFamily: 'Nunito',
    color: 'white',
  },
  icon: {
    color: 'grey',
  }
});

export default (props) => (
  <TouchableOpacity {...props} style={styles.button}>
    {props.children}
  </TouchableOpacity>
);

Then

// I want to be able to do either without having to style Text/Icon each time
const button1 = <Button><Text>Click</Text></Button>
const button2 = <Button><Icon name="back" /></Button>

I want to define the style for icon, text and so on directly in the Button Component, right? Is it possible to pass the styles.text variable to the Text ponent when present in children? Idem for icon, image and so on?

I don't feel like having to fulfill the children style every time is a good practice. I could however use <Button text={'Click'} /> syntax then play if/else statements but I am not fond of passing attributes for the content.

Let's imagine I have a Button Component. I can import it from different screens and it behaves independently. I can give it different children (text, image, text + icon, icon etc.).

This would look like something like that:

import React from 'react';
import { TouchableOpacity } from 'react-native';

import theme from '$/theme';

const styles = StyleSheet.create({
  button: {
    backgroundColor: 'red',
  },
  text: {
    fontFamily: 'Nunito',
    color: 'white',
  },
  icon: {
    color: 'grey',
  }
});

export default (props) => (
  <TouchableOpacity {...props} style={styles.button}>
    {props.children}
  </TouchableOpacity>
);

Then

// I want to be able to do either without having to style Text/Icon each time
const button1 = <Button><Text>Click</Text></Button>
const button2 = <Button><Icon name="back" /></Button>

I want to define the style for icon, text and so on directly in the Button Component, right? Is it possible to pass the styles.text variable to the Text ponent when present in children? Idem for icon, image and so on?

I don't feel like having to fulfill the children style every time is a good practice. I could however use <Button text={'Click'} /> syntax then play if/else statements but I am not fond of passing attributes for the content.

• javascript
• react-native

Share Follow asked Feb 19, 2018 at 23:01 AlmajuAlmaju 1,3831515 silver badges3131 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

Just pass text or icon as props to your Button Component

export default (props) => (
  <TouchableOpacity {...props} style={styles.button}>
    {props.title && <Text style={styles.text}>{props.title}</Text>}
    {props.icon && <Icon name={props.icon} />}
  </TouchableOpacity>
);

Alternatively create ButtonText and ButtonIcon ponents.

You can use React.cloneElement

export default (props) => (
  <TouchableOpacity {...props} style={styles.button}>
    {this.renderChildren()}
  </TouchableOpacity>
);

renderChildren() {
    return this.props.children.map(children => {
        return React.cloneElement(children, {style: { color: 'grey', fontFamily: 'cochin' }});
    })
}

But that is if you want use the same style regardless of type of ponent. It will turn both passed down icon and text grey.

本文标签： javascriptReact Native styling propschildrenStack Overflow