React Native-如何调整视图大小并在运行时重新渲染页面

Question

我正在开发具有多个视图的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确实被成功地被调用。但是，视图不会刷新并自动调整大小。如果我转到另一页并回来，我确实会看到调整大小的视图，但在同一页面上留在同一页面上。有什么想法如何实现调整底部视图大小的目标？（当然，其他人会按比例收缩）。

Answer 1

您应该使用setState更新状态，否则您不会触发rerender。只需更改resizeAudioPlayer实现以使用此功能即可。

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

UPDATE - 如果要将状态设置为取决于先前状态的值（如在这种情况下），使用更新器功能是一个好主意。

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