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

Question

好吧，我一直在努力解决这个问题，我找不到解决方案，请记住，我是自学成才的，我ve一直在研究反应的本地大约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不知道该样式= {} prop的意思。我不知道的是如何使我的自定义组件理解它。

预先感谢

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
    }
});