Состояние обновляется, но не применяется везде

Question

Я пытаюсь сделать индикатор загрузки заменять изображение при нажатии кнопки, но он не работает правильно. Вот то, что мой взгляд выглядит следующим образом:

<View style={styles.header}> 
    <ProgressBarAndroid style={this.state.showProgress ? styles.image : styles.hidden } /> 
    <Image style={this.state.showProgress ? styles.hidden : styles.image } source={{uri: '....'}} /> 
</View> 

this.state.showProgress устанавливается в ложь в конструкторе, и ничего не будет отображаться на первой, но когда я нажимаю на кнопку, которая запускает this.setState({showProgress: true}), индикатор загрузки показывает вверх.

Есть ли что-то, что мне не хватает? Если я скопирую тернарный оператор из элемента управления ProgressBarAndroid, я получу изображение одновременно, но не наоборот.

Есть ли лучший способ достичь этого?

Answer 1

Вы также могли бы сделать что-то вроде

<View style={styles.header}> 
    { this.state.showProgress ? 
     <ProgressBarAndroid style={styles.image} /> : 
     <Image style={styles.image} source={{uri: '....'}} /> 
    } 
</View> 

Таким образом, у вас есть только один трёхслойным и это немного легче смотреть. Если это все еще не работает, может быть что-то не так со стилями/элементами. Вы можете опубликовать их, чтобы мы могли взглянуть.