在React Native中有条件地渲染图像

时间:2019-10-22 15:17:47

标签: image react-native

我一直在尝试根据条件渲染图像。目前,我有一个列表,在应用程序启动时为空,在发生某个事件后,此列表将填充字符串,并且listLength变量从0(false-ish)变为1(true-ish)。我尝试使用三元运算符传递列表长度和列表本身作为图像源的条件。有人可以帮我弄清楚是怎么回事。

  let connect_logs = []
  let connect_line_length = connectLogs.length

  return (
    <View style={styles.container}>
        <Image 
          source={
            connect_line_length ? require('../assets/images/connect_line.png') : 
                    require('../assets/images/no_line.png')
          }
          style={styles.lineImage}
        />
   )

2 个答案:

答案 0 :(得分:1)

我看到View标签没有关闭标签吗?我认为这可能不是问题,而只是尝试关闭标签,并且仅出于测试目的,请尝试

    let connect_logs = []
    let connect_line_length = connectLogs.length

    return (
        <View style={styles.container}>
          <Image source={connect_line_length ? '1' : '0'}
           style={styles.lineImage} />
        </View>
    )

答案 1 :(得分:1)

首先,请记住(几乎所有时间)如果要基于某些变量/对象/列表等来更改应用程序的UI(重新渲染组件),则需要该变量/对象/ list等应该声明为状态变量。

所以我建议您像这样在组件状态内初始化列表:

state = {
  connect_logs: [],
}

然后,每当您要添加更新列表时,都应通过调用setState()来重新呈现UI以反映最新更改来执行此操作,例如:

const updatedList = ['item1', 'item2', 'item3']; //dummy values
this.setState({connect_logs: updatedList}); //update state to change UI

现在您应该在this.state.connect_logs上应用条件,以动态更改图像的来源,如下所示:

return (
    <View style={styles.container}>
        <Image 
          source={
            this.state.connect_logs.length>0 ?
                    require('../assets/images/connect_line.png') : 
                    require('../assets/images/no_line.png')
          }
          style={styles.lineImage}
        />
    </View>
   )