如何設置默認道具值自定義狀態，少部分在陣營本地

我有一個非常簡單的組件，叫做Divider這裏是源代碼：如何設置默認道具值自定義狀態，少部分在陣營本地

import React from "react"; 
import { StyleSheet, View } from "react-native"; 

export default class Divider extends React.Component { 
    render() { 
    return (
     <View style = { styles.separator } /> 
    ); 
    } 
} 

const styles = StyleSheet.create({ 
    separator: { 
    height: StyleSheet.hairlineWidth, 
    marginBottom: 8, 
    backgroundColor: "#FFFFFF80", 
    }, 
});

我想實現的是，在值styles.separator成爲此組件的默認值，因爲這些是我在大多數情況下使用的值，但在某些邊緣情況下，我需要將marginBottom更改爲16。

所以大多數情況下，我只想做<Divider />，但有時<Divider marginBottom = 16 />

我有什麼目前是這樣的下面，但顯然這是行不通的。

import React from "react"; 
import { StyleSheet, View } from "react-native"; 

export default class Divider extends React.Component { 
    static defaultPropts = { 
    marginTop: 0, 
    marginBottom: 8, 
    backgroundColor: "#FFFFFF80", 
    } 

    render() { 
    return (
     <View style = {{ 
     height: StyleSheet.hairlineWidth, 
     marginTop: {this.props.marginTop}, 
     marginBottom: {this.props.marginBottom}, 
     backgroundColor: {this.props.backgroundColor}, 
     }} /> 
    ); 
    } 
}

來源

2017-09-12 Silex

你可以像這樣

export default class Divider extends React.Component { 
render() { 
return (
    <View style = {{ 
    height: StyleSheet.hairlineWidth, 
    marginTop: {this.props.marginTop}, 
    marginBottom: {this.props.marginBottom}, 
    backgroundColor: {this.props.backgroundColor}, 
    }} /> 
); 
} 
} 

Divider.defaultProps = { 
    marginTop: 0, 
    marginBottom: 8, 
    backgroundColor: "#FFFFFF80", 
}

來源

2017-09-12 13:28:58

嗨@Mohadmed Khalil，不幸的是這不適合我。：/ – Silex

您可以通過道具領取您的自定義樣式，並在你的組件風格把它們作爲數組。當你在組件之後調用道具風格時，它將覆蓋它已有的任何相同風格的屬性。

例如，假設你有一個名爲「卡」組件，你可以寫你的組件是這樣的：

<View style={[style.cardStyle, props.style]}> 
    {props.children} 
</View>

，並調用它像這樣<Card style={{ backgroundColor: '#FFFFFF'}} />

因此它獲得所有定義的「cardStyle '從它自己的組件，也添加道具收到的樣式。

希望它有幫助。

編輯：

你可以嘗試這樣的事情

import React from "react"; 
import { StyleSheet, View } from "react-native"; 

const Divider = (props) => { 
     <View style = {{ 
     height: StyleSheet.hairlineWidth, 
     marginTop: {this.props.marginTop}, 
     marginBottom: {this.props.marginBottom}, 
     backgroundColor: {this.props.backgroundColor}, 
     }} /> 
} 

Divider.defaultProps = { 
    marginTop: 0, 
    marginBottom: 8, 
    backgroundColor: "#FFFFFF80", 
    } 

export default Divider;

讓我知道它是否適合你。

來源

2017-09-12 13:30:12 soutot

嗨@soutot，謝謝你的建議。但我真的想知道未來的用例，我如何將默認值分配給我的道具。如果我有'你好{this.props.something}'，我不會在我使用我的組件的地方賦值'something'，但它仍然會說「世界」。 – Silex

我更新了答案。以此爲例，檢查是否按預期工作。 – soutot

所以經過研究，我發現這個工作。

import React from "react"; 
import { Dimensions, StyleSheet, View } from "react-native"; 

export default class Divider extends React.Component { 
    static defaultProps = { 
    customWidth: Dimensions.get("window").width/2.0, 
    } 

    render() { 
    const halfWidth = this.props.customWidth 

    return (
     <View style = { [styles.separator, {width: halfWidth}] } /> 
    ); 
    } 
} 

const styles = StyleSheet.create({ 
    separator: { 
    height: StyleSheet.hairlineWidth, 
    backgroundColor: "#FFFFFF80", 
    }, 
});

所以，現在每當我使用<Divider />其寬度會是半個屏幕大小的，但如果我國防部<Divider customWidth = { 10 }，那麼它將覆蓋缺省值，並將於10 DP代替。

來源

2017-09-12 14:43:16 Silex

如何設置默認道具值自定義狀態，少部分在陣營本地

回答

相關問題