React-native if 列表项中的条件答案

【问题标题】：React-native if condition in List ItemReact-native if 列表项中的条件
【发布时间】：2017-09-28 09:49:59
【问题描述】：

我有一个呈现数组的列表，我如何放置一个 if 条件语句？.. 例如

如果 (item.ticketId === 2) { 并且在 if 语句中，数据渲染将采用不同的颜色 }

我需要创建另一个函数吗？

           <Content>
                <ScrollView>
                <List>
                  { this.state.ticket.map((item, i) => (
                    <ListItem
                    roundAvatar
                    key={i}
                    avatar={
                      <View >
                        <Text>{item.ticketId}</Text>
                      </View>
                    }
                      title={
                        <View>
                          <Text>ROW :{item.row}</Text>
                        </View>
                      }
                      subtitle={
                        <View>
                          <Text>GATE :{item.gate}</Text>
                        </View>
                      }
                    />
                  ))
                  }
                  </List>
                </ScrollView>
              </Content>

【问题讨论】：

标签： arrays if-statement react-native

【解决方案1】：

您可以使用条件运算符。像这样的

<View >
  <Text style={item.ticketID === 2 ? style1 : style2}>{item.ticketId}</Text>
</View>

【讨论】：

【解决方案2】：

我建议绝对将映射函数移至另一个函数以提高可读性。然后在其中，您可以使用标准 if/else 语法或三元表达式：

renderListItem = (item, i) => {
    // you can use standard if/else
    if (item.ticketId === 2) {
        // render something you want
        return (
            <ListItem
                roundAvatar
                key={i}
                avatar={
                    <View style={customStyleObject}>
                        <Text>{item.ticketId}</Text>
                    </View>
                }
                title={
                    <View style={customStyleObject}>
                        <Text>ROW :{item.row}</Text>
                    </View>
                }
                subtitle={
                    <View style={customStyleObject}>
                        <Text>GATE :{item.gate}</Text>
                    </View>
                }
            />
        );
    } else {
        // or you can use ternary expressions for some smaller differences
        return (
            <ListItem
                roundAvatar
                key={i}
                avatar={
                    <View style={item.ticketId===3 ? customStyle : standardStyle}>
                        <Text>{item.ticketId}</Text>
                    </View>
                }
                title={
                    <View>
                        <Text>ROW :{item.row}</Text>
                    </View>
                }
                subtitle={
                    <View>
                        <Text>GATE :{item.gate}</Text>
                    </View>
                }
            />
        );
    }
}

然后在render方法中调用：

render() {
    return (
        <Content>
            <ScrollView>
                <List>
                    { this.state.ticket.map(this.renderListItem) }
                </List>
            </ScrollView>
        </Content>
    );
}

如果你对更多在 react 和 react native 中进行调节的方法感兴趣，你可以学习它们here

【讨论】：