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

样式数组中的每个元素必须是对象或StyleSheet。像这样：

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

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

Answer 2

说实话，这对我来说很奇怪，但我认为这就是你想要实现的目标

更新：您可以执行一种解决方法，如下所示

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

样式数组中的React Native映射数组对象？

2 个答案: