react-native - React Native 按状态更改样式

Question

当 this.state.item1 为真时，它不起作用。

 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 === '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 2

使用三元运算符根据条件显示样式：

“（条件）？满足条件：不满足条件”

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

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

但是，键不应该是布尔值，它需要是唯一标识符。

Answer 4

你可以这样做。

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