React本机映射的数组对象在样式数组中

Question

现在试图将其解决几个小时，而没有骰子。除了样式数组，一切都起作用。不确定如何在样式数组中包含映射的数组对象？

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

Answer 1

说实话对我来说看起来很奇怪，但我认为这是您想要实现的

更新：您可以做一个解决方法，如

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>
        )}
);
}

Answer 2

样式数组中的每个元素必须是对象或样式表。这样的东西：

style = StyleSheet.create({ navTxt: { color: 'red' } })
<Text style={ [ style.navTxt, { label: x.label } ] }> {x.label} </Text>