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}
        />
   )

让我们连接日志=[]
让connect\u line\u length=connectLogs.length
返回(
)

我看到视图标记没有关闭标记？我认为这可能不是问题所在，但是试着关闭标签，也试着测试一下

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

让我们连接日志=[]
让connect\u line\u length=connectLogs.length
返回(
)

我看到视图标记没有关闭标记？我认为这可能不是问题所在，但是试着关闭标签，也试着测试一下

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

让我们连接日志=[]
让connect\u line\u length=connectLogs.length
返回(
)

首先，您应该记住（几乎所有时候）如果您想根据某个变量/对象/列表等更改应用程序的UI（重新呈现组件），那么该变量/对象/列表等应声明为状态变量

因此，我建议您在组件状态中初始化列表，如下所示：

状态={
连接日志：[]，
}

然后，无论何时要添加或更新列表，都应通过调用

setState（）

来执行此操作，以重新呈现UI以反映最新的更改，例如：

const updatedList=['item1'，'item2'，'item3']//虚拟值
this.setState（{connect_logs:updatedList}）//更新状态以更改用户界面

现在，您应该将您的条件应用于

this.state.connect_logs

以动态更改图像的源，如下所示：

返回(
0 ?
需要（'../assets/images/connect_line.png'）：
需要（“../assets/images/no_line.png”）
}
style={style.lineImage}
/>
)

首先，您应该记住（几乎所有时候）如果您想根据某个变量/对象/列表等更改应用程序的UI（重新呈现组件），那么该变量/对象/列表等应声明为状态变量

因此，我建议您在组件状态中初始化列表，如下所示：

状态={
连接日志：[]，
}

然后，无论何时要添加或更新列表，都应通过调用

setState（）

来执行此操作，以重新呈现UI以反映最新的更改，例如：

const updatedList=['item1'，'item2'，'item3']//虚拟值
this.setState（{connect_logs:updatedList}）//更新状态以更改用户界面

现在，您应该将您的条件应用于

this.state.connect_logs

以动态更改图像的源，如下所示：

返回(
0 ?
需要（'../assets/images/connect_line.png'）：
需要（“../assets/images/no_line.png”）
}
style={style.lineImage}
/>
)

这里提到了类似的问题，我实际上遇到了这个链接，并尝试实现了上面列出的解决方案，但是，这对我来说不起作用，它总是使用三元失败条件并渲染无线图像。这里提到了类似的问题，我实际上遇到了这个链接，并尝试实现那里列出的解决方案，但是，这对我不起作用，它总是使用三元失败条件并渲染无线图像。