React Native - Как изменить размер представления и перерисовать страницу во время выполнения - PullRequest
Новая
       10

React Native - Как изменить размер представления и перерисовать страницу во время выполнения

0 голосов
/ 04 марта 2019

Я занимаюсь разработкой приложения Audip Player, которое имеет несколько представлений.Вот так 

<View style={{flex: 0.04}}>
    <Text style={styles.title}>{this.state.pageTitle}</Text>
</View>
<View style={{flex: 0.90}}>
    <FlatList
    .....List of clickable Audios to sent to player.....
    />
</View>
<View style={{flex: this.state.playerSize}}>
    <TouchableOpacity style={styles.audioplayerbutton} onPress={() => this.resizeAudioPlayer()}>
        <Text style={styles.accentTextSmall}>ReSize</Text>
    </TouchableOpacity>    
</View>

Вид снизу имеет кнопку.Я хочу, чтобы пользователь нажал на это, чтобы увеличить размер последнего просмотра.Повторное нажатие должно вернуть его к нормальному размеру.К onPress прикреплена следующая функция: 

resizeAudioPlayer () {

    this.state.playerSize =  (this.state.playerSize == 0.06) ? 1.5 : 0.06;
}

this.state.playerSize имеет значение по умолчанию 0,06, определенное в конструкторе.

ResizePlayer действительно вызывается успешно.Однако представление не обновляется и не изменяет размер автоматически.Если я перехожу на другую страницу и возвращаюсь, я вижу измененные размеры, но не на той же странице.Любая идея, как достичь этой цели изменения размера нижней панели?(другие будут уменьшаться пропорционально, конечно).

1 Ответ

0 голосов
/ 04 марта 2019

Вы должны использовать setState, чтобы обновить состояние, иначе вы не будете запускать рендеринг.Просто измените реализацию resizeAudioPlayer, чтобы использовать эту функцию. 

resizeAudioPlayer() {
  this.setState({
    playerSize: (this.state.playerSize === 0.06) ? 1.5 : 0.06,
  });
}

Обновление - В случае, если вы хотите установить состояние в значение, которое зависит от предыдущего состояния (как в этомсценарий), рекомендуется использовать функцию обновления. 

resizeAudioPlayer() {
  this.setState(prevState => ({
    playerSize: (prevState.playerSize === 0.06) ? 1.5 : 0.06,
  }));
}
...