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

【问题标题】：Conditionally Render Images in React Native在 React Native 中有条件地渲染图像
【发布时间】：2020-02-18 18:59:27
【问题描述】：

我一直在尝试根据条件渲染图像。目前我有一个列表，在应用程序开始时它是空的，在某个事件之后，这个列表被一个字符串填充，并且 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}
        />
   )

【问题讨论】：

这里提到了类似的问题stackoverflow.com/questions/36899145/…
我实际上遇到了该链接并尝试实施那里列出的解决方案，但是，这对我不起作用，它总是最终使用三元失败条件并呈现 no_line 图像。

标签： image react-native

【解决方案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>
   )

【讨论】：

【解决方案2】：

我看到 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>
    )

【讨论】：