通过React Native中的App.js向自定义组件添加样式

Question

好的，过去3天，我一直在努力解决这个问题，但找不到解决方案，请记住，我是自学成才的，并且我已经研究了本机反应已有3个月了。

无论如何，我都有一个自定义按钮，具有定义的样式，每次渲染按钮时，它都会加载其文件中显示的样式：

Botaozudo.js：

import React from 'react';
import { Text, TouchableOpacity, StyleSheet } from 'react-native';

export default class Botaozudo extends React.Component {
    render() {
        const { titulo, evento } = this.props;
        return (

                    <TouchableOpacity
                        style={styles.button}
                        onPress={() => evento()}>
                            <Text style={styles.txtButton}>{titulo}</Text>
                    </TouchableOpacity>

        );
    }
}

const styles = StyleSheet.create({
    btnAlinhar: {
        alignItems: 'flex-end',
        marginRight: 20,
        paddingTop: 7
    },
    button: {
        backgroundColor: '#a082c9',
        width: 100,
        height: 40,
        borderRadius: 10
    },
    button2: {
        backgroundColor: '#a082c9',
        width: 300,
        height: 90,
        borderRadius: 10
    },
    txtButton: {
        color: '#fff',
        fontSize: 20,
        textAlign: 'center',
        paddingVertical: 5
    }
});

可以说，我要在App.js上使用两个不同的按钮，一个看起来与上面完全一样，另一个按钮具有不同的大小和背景颜色。 在我的脑海中，我只需要做这样的事情（针对另一种）：

<Botaozudo 
    style={styles.newBtn} 
    titulo='I am a button' 
    event={() => 
        console.log('yup I am a button')}/>

const styles = StyleSheet.create({
    newBtn: {
        backgroundColor: '#7c7070',
        width: 200,
        height: 100
    }
});

但问题是我的Botaozudo不知道那style = {}道具的含义。 我不知道的是如何使我的自定义组件理解它。

提前致谢，

Answer 1

安装https://www.npmjs.com/package/prop-types

然后在Botaozudo.js中 ：

import React from 'react';
import { Text, TouchableOpacity, StyleSheet } from 'react-native';
import PropTypes from 'prop-types';

export default class Botaozudo extends React.Component {
  static propTypes = {
    // Custom style for Botaozudo. Requires object
    componentStyle: PropTypes.object,
  };

  static defaultProps = {
    componentStyle: styles,
  };

  render() {
    const { titulo, event, componentStyle } = this.props;
    return (
      <TouchableOpacity style={componentStyle.newBtn} onPress={() => event()}>
        <Text style={styles.txtButton}>{titulo}</Text>
      </TouchableOpacity>
    );
  }
}

const styles = StyleSheet.create({
  btnAlinhar: {
    alignItems: 'flex-end',
    marginRight: 20,
    paddingTop: 7,
  },
  button: {
    backgroundColor: '#a082c9',
    width: 100,
    height: 40,
    borderRadius: 10,
  },
  button2: {
    backgroundColor: '#a082c9',
    width: 300,
    height: 90,
    borderRadius: 10,
  },
  txtButton: {
    color: '#fff',
    fontSize: 20,
    textAlign: 'center',
    paddingVertical: 5,
  },
});

并在App.js中 ：

<Botaozudo 
    componentStyle={styles} 
    titulo='I am a button' 
    event={() => 
        console.log('yup I am a button')}/>

const styles = StyleSheet.create({
    newBtn: {
        backgroundColor: '#7c7070',
        width: 200,
        height: 100
    }
});