React Native：如何在屏幕更改时使视图停留在屏幕上？

Question

我正在构建一个带有 react native 的播客应用程序，我想实现你在大多数播客/音乐应用程序的屏幕底部看到的迷你播放器。见下图。无论您导航到哪个屏幕，我都想让迷你播放器坚持下去。知道如何在本机反应中实现这一点吗？我现在使用反应导航作为主要导航器https://reactnavigation.org/。

Answer 1

最好的方法是使用flexbox 的魔力。

将您的应用视为两个主要屏幕的组合。
1) 带有标题、导航菜单和播放列表（内部等）的部分
2) 播放器

试试这个布局

<View style={styles.container}>
    <View style={styles.firstBox}>
        1)
    </View>
    <View style={styles.secondBox}>
        2)
    </View>
</View>

现在您所要做的就是分配适当的样式

const styles = {
    container: {
        flex: 1,
    },
    firstBox: {
        flex: 8
    },
    secondBox: {
        flex: 2
    }
}

这对于基本结构来说已经足够了。您可以进行相应的设计。