在樣式數組裏面反應原生映射的數組對象？

一直努力工作了幾個小時，現在沒有骰子。除了樣式數組以外，一切都可以使用。不知道如何將映射的數組對象包含在樣式數組中？在樣式數組裏面反應原生映射的數組對象？

錯誤：Failed prop type: Invalid props.style...

所以<Text Style={陣列格式不正確，但我不知道正確的語法轉換。任何幫助不勝感激。

const navTabs = [ {label: 'Home'}, {label: 'Next'} ] 
const { Home, Next } = styles 

{navTabs.map(x => 
<TouchableOpacity key={x.label} onPress={() => navigate(`${x.label}`)}> 
<Text style={ [ navTxt, `${x.label}` ] }> {x.label} </Text> 
</TouchableOpacity>)} 

const styles = { navTxt:{backgroundColor:'#000', paddingHorizontal: 5}, Home:{color: 'red'}, Next:{color: 'white'} }

來源

2017-09-05 Max

你爲什麼使用'x.label'作爲不是樣式的樣式？ ''應該有效。 – Val

@Val因爲有兩種樣式適用於'' - 通常它會是一個'style = {[navTxt，Home]}或'[navTxt，Next]'數組''，但是因爲我正在映射'const navTabs'填充，導航功能並插入標籤字符串和樣式屬性，x.label派生自.map函數。檢查下面提供的工作解決方案@soutot – Max

說實話這看起來很奇怪的我，但我認爲這是你想要達到

更新內容：有一個變通方法，你可以做，如以下

render() { 
const navTabs = [ 
    { label: 'Home' }, 
    { label: 'Next' }, 
]; 
const styles = { 
    Home: { 
    color: 'rgb(255, 0, 0)', 
    }, 
    Next: { 
    color: 'rgb(0, 0, 0)', 
    }, 
    navTxt: { 
    backgroundColor: 'rgb(0, 255, 0)', 
    }, 
}; 

return (
    {navTabs.map(x => 
      <TouchableOpacity key={x.label} onPress={() => {}}> 
      <Text style={{ ...styles.navTxt, ...styles[x.label] }}> {x.label} </Text> 
      </TouchableOpacity> 
     )} 
); 
}

來源

2017-09-05 23:31:37 soutot

我應該也包含navTxt風格來確定是否需要[navTxt ，x.label]，但他們的基礎上工作backgroundColor等 – Max

更新了與上述所有相關風格的問題 – Max

是的！感謝@soutot的工作。傳播運營商，對吧？ – Max

樣式數組中的每個元素都必須是對象或樣式表。事情是這樣的：

style = StyleSheet.create({ navTxt: { color: 'red' } }) 

<Text style={ [ style.navTxt, { label: x.label } ] }> {x.label} </Text>

來源

2017-09-05 23:27:59 temakozyrev

現在的錯誤是：無效的props.style鍵'標籤'提供給文本 – Max

好的，我寫了這個例子。您必須從可用列表中選擇所需的值：https://facebook.github.io/react-native/docs/text.html#style – temakozyrev

有些作爲'fontSize'或'fontWeight'。 – temakozyrev

在樣式數組裏面反應原生映射的數組對象？

回答

相關問題