为数组中的每个元素指定不同的样式

Question

我显示这样的数组：

  this.props.group.fields.slice(0,3).map((field, key)=>{
     return( 
        <View style= {styles.cardContainerStyle}>
        <FieldListItem key={key} field ={field}></FieldListItem>)

FieldListItem呈现方法是：

render(){
    let types = this.props.field.type                      
    return(<Text>types<Text>)}

基本上，我使用切片只显示前3个元素，我想以不同的方式显示它们。例如，我想将第一个元素样式为标题-粗体，第二个元素为单行，字体应该更小，最后一个元素可以是多行，颜色应该不同。我有什么办法可以做到吗？

Answer 1

我做了以下工作：

switch(key){
      case 0:
        return(<FieldListItem itemStyle={{fontSize:20,color:'black', fontWeight:'bold'}} key={key} field={field}></FieldListItem>);
      case 1: 
        return(<FieldListItem itemStyle={{color:'black', fontSize:15}} key={key} field={field}></FieldListItem>);   
      case 2:
        return(<FieldListItem itemStyle={{color:'grey',fontSize:15}} key={key} field={field}></FieldListItem>);
    }

Answer 2

给返回元素一个具有唯一值的id，您可以使用key，因为您已经在使用它。

return(<Text id=`text{this.props.key}`>types<Text>)}

在你的style.css文件里，有这样的东西：

#text1 {}

#text2 {}

#text3 {}

Answer 3

您可以在样式表中定义自定义样式，也可以直接在组件中声明自定义样式。

render() {
    let types = this.props.field.type
    let itemStyle = {}
    switch(type)
    {
        case 'type1':
            itemStyle={fontSize:10}
        case 'type2':
            itemStyle={fontSize:20}
    }
    return(<Text styles={itemStyle}>types<Text>)}
}