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

如果您尝试使用需要使用的状态项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 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

使用三元运算符在条件下显示样式：

＆＃34; （条件）？ satisf_condition：unsatisfied_condition＆＃34;

<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

你可以这样做。

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

按状态反应Native Change样式

4 个答案: