如何將 Style Props 傳遞到 React Native 中的可重用組件中，以便將來更靈活的樣式

Question

目標：創建一個可重用的 React 組件，並在未來靈活地為組件的任何部分設置樣式。

例如，我創建了一個類似按鈕的組件，我想在未來的不同情況下重用它，並在我使用它的不同地方賦予它不同的樣式：

function reusableButton(){
return(
<View style={styles.defaultStyle}>
<Text style={styles.defaultTitleStyle}>Button Title</Text>
</View>
)}

const styles = StyleSheet.create({
  defaultStyle:{
 height: 50,
 width: 100,
 borderRadious: 25,
 backgroundColor:'red'},

 defaultTitleStyle: {
color:'green',
fontWeight: 'bold'}
})

問題是：當我使用這個按鈕時，將來如何更改默認樣式？

Answer 1

目標：創建一個可重用的 React 組件，並在未來靈活地為組件的任何部分設置樣式。

如何實現這一點：

1. 使用 const 或 function 創建可重用組件。
2. 將“props”作為參數傳遞給組件，無論是函數式還是常量。
3. 提供可重用組件樣式的元素，它們是默認樣式和“props.futureStyle”的數組。 請注意，這里的“futureStyle”只是一個名稱，您可以使用任何您想要的名稱。
4. 每當您調用可重用組件時，您都可以輕松地使用“futureStyle”進行任何更改。 請注意，您可以將“futureStyle1”、“futureStyle2”等聲明到可重用組件的不同部分，以便您可以編輯作為組件一部分的每個視圖、文本等的樣式，無論它們將來可能添加到何處

示例：創建可重用組件：

 const ReusableButton = (props) =>{
    return(
    <View style={[styles.currentButtonStyle, props.futureButtonStyle]}>
    <Text style={[styles.currentButtonTitle, props.futureTitleStyle]}>{props.title}</Text>
    </View> )}; 

//Here are my default styles:

const styles = Stylesheet.create({
currentButtonStyle: {
    height:50,
    width: 100, 
    backgrroundColor:'red'},
currentButtonTitle:{
    color: 'white'
    fontSize: 20,
 },
})

從此以后，在我希望調用和使用 ReusableButton 的任何地方，它都可以使用未來的樣式編輯樣式。 例子：

function NewComponent(){
return(
<View>
<Text>Hi let us make use of our old reusable button</Text>
<ReusableButton futureButtonStyle={{width: 200, height: 100, backgroundColor:'blue'}} futureTitleStyle={{fontWeight:'bold', fontSize: 50}}/>
</View>
)
}