在样式数组里面反应原生映射的数组对象？

一直努力工作了几个小时，现在没有骰子。除了样式数组以外，一切都可以使用。不知道如何将映射的数组对象包含在样式数组中？在样式数组里面反应原生映射的数组对象？

错误：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

在样式数组里面反应原生映射的数组对象？

回答

相关问题