问题描述
我正在尝试在 React Native 中创建一个具有一些默认样式的自定义按钮,但我希望该按钮允许我根据情况更改新按钮的默认样式。
代码是这样的:
import React from 'react';
import {StyleSheet,TouchableOpacity,Text} from 'react-native';
export default function custom_button({txt,onPress}){
return(
<TouchableOpacity style={styles.container} onPress={onPress} >
<Text style={styles.text}>{txt}</Text>
</TouchableOpacity>
)
}
const styles = StyleSheet.create({
container:{
backgroundColor:'#3F51B5',padding:10,margin:20,width:'80%',borderRadius:15,alignItems:'center'
},text:{
fontWeight:'bold',color:'white',fontSize:16
}
});
我需要一个英雄
解决方法
你可以做一个类似用途的全局样式,当你需要修改样式时你可以这样做 style={[styles.container,{在这里添加要修改的内容}]} 我希望这能帮助你解决你的问题
,这是一个非常简单的实现:
import React from 'react';
import {StyleSheet,TouchableOpacity,Text} from 'react-native';
export default function custom_button({txt,onPress,txtStyle,buttonStyle}){
return(
<TouchableOpacity style={[styles.container1,buttonStyle && buttonStyle]} onPress={onPress} >
<Text style={[styles.text1,txtStyle && txtStyle]}>{txt}</Text>
</TouchableOpacity>
)
}
const styles = StyleSheet.create({
container:{
backgroundColor:'#3F51B5',padding:10,margin:20,width:'80%',borderRadius:15,alignItems:'center'
},text:{
fontWeight:'bold',color:'white',fontSize:16
}
});
还为您创建了一个 snack。您可以在这里进行实验和玩耍。
,您应该查看 React Native 中的“按钮”。确保从 'react-native' 导入 { Button };
这是一个例子:
<Button
onPress={onPressLearnMore}
title="Learn More"
color="#841584"
accessibilityLabel="Learn more about this purple button"
/>
我也同意 Faris 的回答,您可以创建全局样式。只需将样式从容器/文本更改为其他样式