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

Posted 2023-03-08

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

【英文标题】：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 不，我没有修复它

【参考方案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 控制（显示/隐藏/更新状态/等）此组件，具体取决于您的首选配置。