【问题标题】:React Native: How to make a view stick on screen while the screen changes?React Native:如何在屏幕更改时使视图停留在屏幕上?
【发布时间】:2017-12-14 16:52:40
【问题描述】:

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

【问题讨论】:

  • 你解决了吗?

标签: ios reactjs react-native uitoolbar react-navigation


【解决方案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
    }
}

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

【讨论】:

  • Shashank,感谢您的回复。但是迷你播放器应该只在用户点击“播放”按钮时出现。如果没有播放内容,firstBox 应该占据整个屏幕。你将如何实现它?
  • 这可以通过制作主屏幕来完成,即包含播放列表的所有空间,即。 flex: 1 并使玩家位置:'absolute'。通过使播放器成为绝对播放器,您可以将其放置在您想要的任何位置,并且可以使用 Dimensions.get('window').height - (size_of_player) 设置底部位置。如果项目是开源的,你可以和我分享代码,我可以更好地帮助你。
  • 你能检查一下这个问题吗?reddit.com/r/reactnative/comments/fky3o0/…
猜你喜欢
  • 2015-12-03
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2021-03-02
  • 2022-10-22
  • 1970-01-01
相关资源
最近更新 更多