Реагирование на собственное изменение стиля по состоянию

Question

Не работает, когда this.state.item1 имеет значение true.

 onfocus: {
    backgroundColor: 'black',
    width: 800,
  },
 this.state = {     
      item1: true,   
  }; 
      <Image key={"item1"} style={this.state.item1 && styles.onfocus} source={{ uri: 'https://github.com/c-bata/react-native-focus-scroll/blob/master/example/assets/rokko-yamatanoorochi-ipa.jpg?raw=true' }} />

Answer 1

Вы можете сделать это.

<Image key={"item1"} 
    style={this.state.item1 ? styles.onfocus : {}} 
    source={{ uri: 'https://github.com/c-bata/react-native-focus-scroll/blob/master/example/assets/rokko-yamatanoorochi-ipa.jpg?raw=true' }} 
/>

Answer 2

Используйте это, оно должно работать

<Image key={"item1"} style={this.state.item1 === 'your_condition' ? styles.onfocus : style.another_styles} source={{ uri: 'https://github.com/c-bata/react-native-focus-scroll/blob/master/example/assets/rokko-yamatanoorochi-ipa.jpg?raw=true' }} />

Answer 3

Использование троичных операторов для отображения стилей в условиях:

"(условие)? Выполняется_условие: ненасыщенное_условие"

<Image key={"item1"} style={(this.state.item1==true) ? styles1 : style2} source={{ uri: 'https://github.com/c-bata/react-native-focus-scroll/blob/master/example/assets/rokko-yamatanoorochi-ipa.jpg?raw=true' }} />

Answer 4

Похоже, вы ссылаетесь на item1 в качестве ключа, если вы пытаетесь использовать элемент состояния, вам нужно использовать this.state.item1.

<Image key={"this.state.item1"} style={this.state.item1 && styles.onfocus} source={{ uri: 
'https://github.com/c-bata/react-native-focus- 
scroll/blob/master/example/assets/rokko-yamatanoorochi-ipa.jpg?raw=true' }} />

Однако ключ не должен 'не может быть логическим значением, это должен быть уникальный идентификатор.