Условно отображать изображения в React Native

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

Во-первых, вы должны иметь в виду, что (почти все время), если вы хотите изменить пользовательский интерфейс вашего приложения (перерисовать компонент) на основе некоторой переменной / объекта / списка и т. Д., Затем эта переменная / объект/ list и т. д. должны быть объявлены как переменная состояния.

Поэтому я бы предложил вам инициализировать ваш список в состоянии вашего компонента следующим образом:

state = {
  connect_logs: [],
}

Затем, когда вы захотите добавить обновлениеВ своем списке вы должны выполнить это, вызвав setState(), чтобы повторно обработать ваш пользовательский интерфейс, чтобы отразить последние изменения, например:

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

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