ReactNative inline sytle vs Stylesheet.create

今天我遇到了問題。我想確保我的應用看起來不錯，這需要我做很多調整，特別是在邊緣/填充部分。ReactNative inline sytle vs Stylesheet.create

我的問題是：哪種方法更好？創建多個樣式表（在父組件上）只是爲了適應這些小的變化（我使用無邊距樣式表的可重用組件，這些邊距將從父組件繼承）還是讓它在組件上內聯？

我知道創建樣式表可能是更好的方法。但爲了適應這種繼承的風格，我將使用 style={[myComponentStyle, passedDownParentStyle]} < - 它不會創建一個新的樣式表，然後通過取消使用Stylesheet.create的第一個目的？

任何人都可以在這方面的專家給我一些見解？

編輯例子：

const Style = Stylesheet.create({ 
child: { 
    color: 'red' 
}, 
parent1: { 
    padding: 5, 
    margin: 10 
}, 
parent2: { 
    padding: 10, 
    margin: 5 
} 
}) 

class Child { 
render() { 
    return (
    <Text style={[Style.child, this.props.style]}> 
    {this.props.children} 
    </Text> 
) 
} 
} 

class Parent1 { 
render() { 
    return (
    <Child style={Style.parent1}> 
    Hello 
    </Child> 
) 
} 
} 

class Parent2 { 
render() { 
    return (
    <Child style={Style.parent2}> 
    World 
    </Child> 
) 
} 
}

UPDATE 我的問題是：是不是style={[Style.child, this.props.style]}使用廢止Stylesheet.create的目的是什麼？我不應該完全不使用它嗎？

來源

2017-02-28 Andree Christian

從陣營本地文檔：

代碼質量：

通過移動款式渲染功能的時候，你使代碼更容易理解。

命名樣式是向渲染函數中的低級組件添加含義的好方法。

性能：

使從樣式對象樣式表能夠通過ID引用它，而不是每次都創建一個新的樣式對象。

它也允許只通過橋發送一次樣式。所有後續使用都將引用一個id（尚未實現）。

這就是我爲什麼創建Stylesheet是一個更好的方法的理解。

現在回答你的問題：

我想你可以傳下去地圖風格，結合起來，與地圖的你的組件樣式，並創建兩個的組合樣式表。或者，您可以將任何傳遞的樣式視爲默認組件樣式的替代，並將它們中的每一個改爲Stylesheet（因爲它只使用其中一個）。 ~~但是，如果孩子應該由父組件包裝，則可能不必執行任何操作，因爲樣式可能已被繼承。~~（編輯：這是錯誤的，所以忽略這部分）

如果你能提供一些額外的代碼更多的背景，我可能能夠提供更深入的瞭解。

更新：

您也可以使用StyleSheet.flatten（見here）。但是，它帶有以下警告：

注意：謹慎使用此操作會導致優化問題。

ID通過網橋和內存來啓用優化。直接引用樣式對象會剝奪您這些優化。

就像我剛纔所說，你可能要改爲先向下傳遞地圖的道具，然後做Stylesheet.create扁平地圖（上即一個道具的組合圖和組件的默認）。

來源

2017-02-28 14:18:13 TheJizel

感謝您的回答。現在我的問題是：使用'style = {[a，b，...]}'。這是不是無效Stylesheet.create的目的？我想在ReactNative引擎級別上，這將迫使ReactNative重新計算/合併創建的樣式表的屬性，以便創建新樣式。每次組件重新渲染時，都會重新計算風格。我對麼？ @TheJizel –

@AndreeChristian這是我的理解。但是，我認爲您的組件只會呈現一次，除非您正在修改狀態或卸載和重新安裝。 – TheJizel

ReactNative inline sytle vs Stylesheet.create

回答

相關問題