React Native：样式 props.children

Question

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 component 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.

Answer 1

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 components.

Answer 2

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 component. It will turn both passed down icon and text grey.

Answer 3

We have a good Essential cross-platform UI components for React Native that named nativebase.io and it has a easy and complete components . with nativebase.io we can make the components like HTML . for example this code:

const styles = StyleSheet.create({
  button: {
    backgroundColor: 'red',
  }
});

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

now it's :

<Button><Text>Click</Text></Button> //without any const

the complete components like Tabs Header Body Icon and... exist in nativeBase's Docs.

good luck