Question

我一直在尝试根据条件渲染图像。目前，我有一个列表，在应用程序启动时为空，在发生某个事件后，此列表将填充字符串，并且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}
        />
   )

Answer 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>
    )

Answer 2

首先，请记住（几乎所有时间）如果要基于某些变量/对象/列表等来更改应用程序的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>
   )

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

2 个答案: