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

好了，伙计们，过去三天我一直在想这个问题，但我找不到解决办法，请记住我是自学成才的，我已经学习react native三个月了

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

Botaozudo.js:

从“React”导入React；
从“react native”导入{Text，touchablepacity，StyleSheet}；
导出默认类Botaozudo扩展React.Component{
render（）{
const{titulo，evento}=this.props；
返回(
evento（）}>
{titulo}
);
}
}
const styles=StyleSheet.create({
btnAlinhar：{
对齐项目：“柔性端”，
marginRight:20，
加油站：7
},
按钮：{
背景颜色：“#a082c9”，
宽度：100，
身高：40，
边界半径：10
},
按钮2：{
背景颜色：“#a082c9”，
宽度：300，
身高：90，
边界半径：10
},
TXT按钮：{
颜色：“#fff”，
尺寸：20，
textAlign:'中心'，
填充垂直：5
}
});

假设我想在我的App.js上有两个不同的按钮，一个看起来和上面一样，另一个大小和背景颜色不同。在我看来，我只需要做这样的事情（对于不同的一个）：

log（'是的，我是一个按钮'）}/>
const styles=StyleSheet.create({
纽伯顿：{
背景颜色：“#7c7070”，
宽度：200，
身高：100
}
});

但问题是我的Botaozudo不知道style={}prop是什么意思。我不明白的是如何让我的自定义组件理解它

提前感谢，

安装

然后在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,
  },
});

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

从“React”导入React；
从“react native”导入{Text，touchablepacity，StyleSheet}；
从“道具类型”导入道具类型；
导出默认类Botaozudo扩展React.Component{
静态类型={
//Botaozudo的自定义样式。需要对象
componentStyle:PropTypes.object，
};
静态defaultProps={
组件样式：样式，
};
render（）{
const{titulo，event，componentStyle}=this.props；
返回(
事件（）}>
{titulo}
);
}
}
const styles=StyleSheet.create({
btnAlinhar：{
对齐项目：“柔性端”，
marginRight:20，
paddingTop:7，
},
按钮：{
背景颜色：“#a082c9”，
宽度：100，
身高：40，
边界半径：10，
},
按钮2：{
背景颜色：“#a082c9”，
宽度：300，
身高：90，
边界半径：10，
},
TXT按钮：{
颜色：“#fff”，
尺寸：20，
textAlign:'中心'，
填充垂直：5，
},
});

而在App.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,
  },
});

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

log（'是的，我是一个按钮'）}/>
const styles=StyleSheet.create({
纽伯顿：{
背景颜色：“#7c7070”，
宽度：200，
身高：100
}
});

安装

然后在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,
  },
});

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

从“React”导入React；
从“react native”导入{Text，touchablepacity，StyleSheet}；
从“道具类型”导入道具类型；
导出默认类Botaozudo扩展React.Component{
静态类型={
//Botaozudo的自定义样式。需要对象
componentStyle:PropTypes.object，
};
静态defaultProps={
组件样式：样式，
};
render（）{
const{titulo，event，componentStyle}=this.props；
返回(
事件（）}>
{titulo}
);
}
}
const styles=StyleSheet.create({
btnAlinhar：{
对齐项目：“柔性端”，
marginRight:20，
paddingTop:7，
},
按钮：{
背景颜色：“#a082c9”，
宽度：100，
身高：40，
边界半径：10，
},
按钮2：{
背景颜色：“#a082c9”，
宽度：300，
身高：90，
边界半径：10，
},
TXT按钮：{
颜色：“#fff”，
尺寸：20，
textAlign:'中心'，
填充垂直：5，
},
});

而在App.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,
  },
});

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

log（'是的，我是一个按钮'）}/>
const styles=StyleSheet.create({
纽伯顿：{
背景颜色：“#7c7070”，
宽度：200，
身高：100
}
});

非常感谢！！我只是需要在Botaozudo.js:evento（）}>{titulo}中做一些小改动，非常感谢！！我只是需要在Botaozudo.js:evento（）}>{titulo}中做一些小改动