如何在本机反应中为整个应用程序（如每个屏幕）在屏幕底部显示自定义视图答案

【问题标题】：How to show custom view in bottom of the screen for entire application (like every screen) in react native如何在本机反应中为整个应用程序（如每个屏幕）在屏幕底部显示自定义视图
【发布时间】：2019-06-26 06:13:56
【问题描述】：

我正在开发 react-native 项目。我是反应原生的新手。我有一个屏幕，显示平面列表，在显示每个单元格的平面列表中都有一些音频 URL。一旦用户点击 URL，我们必须在屏幕底部显示音频播放器。而且我们必须显示播放/暂停/停止、进度条、背景墙纸和曲目标题等控件。

另外，如果用户导航到其他屏幕并且音频播放器正在播放音频，我必须在每个屏幕上维护这个底部音频播放器。

我基本上来自 iOS 开发，在 iOS 中我们知道我们可以在 app 委托类中定义这个底部视图，但是，在 react native 中如何实现这一点以及如何保持这种音频播放/停止的状态？有什么建议吗？

【问题讨论】：

你在使用 react-navigation 吗？
是的。我们的应用程序有侧视图控制器。
你解决了吗？
@OliverD 不，我没有修复它

标签： react-native audio-player react-native-flatlist

【解决方案1】：

考虑到您正在使用 React Navigation，一种方法可能是在您的应用容器之外呈现一个组件。像这样的：

const Tabs = createBottomTabNavigator(
    ...
);

const Navigation = createAppContainer(Tabs);

export default class App extends React.Component {

    render() {
        return (
            <View>
                <Navigation />
                <AudioPlayer/>
            </View>
        );
    }
}

其中<AudioPlayer/> 代表屏幕底部的播放、暂停等。

然后，您可以通过传递给您的应用容器的屏幕道具或通过 redux 控制（显示/隐藏/更新状态/等）此组件，具体取决于您的首选配置。

【讨论】：