是否在样式数组内React NativeMap数组对象？

tquggr8v 于 2023-01-05 发布在 React

关注(0)|答案(3)|浏览(88)

我已经试着解决这个问题几个小时了，但是没有成功。除了样式数组，其他的都可以。不知道如何在样式数组中包含Map的数组对象？
错误：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'} }

react-native

来源：https://stackoverflow.com/questions/46064190/react-native-mapped-array-objects-inside-style-array

3条答案

按热度按时间

jvlzgdj91#

老实说，这对我来说看起来很奇怪，但我认为这是你想要实现的目标
更新：您可以执行以下变通方案

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

赞(0）回复(0）举报 2023-01-05

tez616oj2#

样式数组中的每个元素必须是一个对象或一个StyleSheet。类似于：

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

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

赞(0）回复(0）举报 2023-01-05

wtlkbnrh3#

style={[styles.cameraViewStyle,{
                transform: [{ scale }, { translateX }, { translateY }]
              }]}

style={[styles.cameraViewStyle,{marginTop:20}]}

赞(0）回复(0）举报 2023-01-05

我来回答

是否在样式数组内React NativeMap数组对象？

3条答案

相关问题

热门标签

最新问答