最簡單的方法來反應原生

我看到，如果我在例如中設置了fontFamily，那麼內部元素不會繼承它的屬性。它是否存在可反應原生樣式的級聯概念？我如何完成它？最簡單的方法來反應原生

2016-12-23 R01010010

RN級聯樣式子你，如果你使用的樣式屬性，你可以閱讀更多關於它在這裏 - https://facebook.github.io/react-native/docs/style.html –

@MattAft是的，它說'一個常見的模式是讓你的組件接受一個樣式道具，而這個樣式道具反過來用於樣式子組件。你可以用它來使CSS樣式「級聯」。但我不確切地知道這是什麼意思。 – R01010010

我編輯了我的答案，以向你展示... – Maxwelll

將樣式傳遞爲在CSS中複製級聯的道具。所有子組件都可以繼承style支柱來實現此目的。它想實現：

const styles = StyleSheet.create({ 
    instructions: { 
     fontSize: 16, 
     textAlign: 'center', 
     margin: 15, 
    }, 
    }); 

    render() { 
    return (
     <View style={styles.container}> 
     <Text style={styles.instructions}> 
     <ChildComponent 
      cascadingStyle={styles} 
     /> 
     </View> 
    ); 
    }

這裏是我創建演示rnplay.org/apps/dErxuQ

來源

2016-12-23 21:22:58 Maxwelll

對不起，怎麼樣？這仍然會迫使我在子組件中設置'style = {this.prop.class}'？原因正是我想要避免的 – R01010010

你爲什麼試圖避免這種情況？它是實現在CSS中發現的級聯效應的最簡單方式，並且非常易於使用 – Maxwelll

我想避免在子項中使用，就像在html中使用css一樣。我將fontFamily設置爲父項，並且子項自動繼承它。這很簡單。 – R01010010

-1

下面是一個例子爲例，父組件將級聯它的風格給孩子們。因此，所有的文本將是紅色的字體在這裏：

render() { 
    return (
    <View style={styles.red}> 
     <Text>just red</Text> 
     <Text>just</Text> 
     <Text>red</Text> 
     <Text>red</Text> 
    </View> 
); 
} 
} 

const styles = StyleSheet.create({ 
red: { 
color: 'red', 
}, 
});

來源

2016-12-23 21:35:19

顯然，在這一刻組件只能繼承父的屬性只如果父是同類型的，或者至少也支持屬性繼承。我在主要的View組件中設置了fontFamily，並沒有在Text兒童中繼承。

來源

2016-12-23 21:59:30 R01010010

我發現避免重複樣式道具的最簡單方法是封裝在一個組件中。例如：

const Item = ({ text }) => <Text style={{ padding: 10 }}>{text}</Text> 

const Consumer =() => 
    <View> 
    <Item text="Item 1" /> 
    <Item text="Item 2" /> 
    <Item text="Item 3" /> 
    </View>

來源

2017-08-03 01:04:40

最簡單的方法來反應原生

回答

相關問題