时间戳

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

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

问题描述

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

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

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

标签： react-nativeaudio-playerreact-native-flatlist

解决方案

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

const Tabs = createBottomTabNavigator(
    ...
);

const Navigation = createAppContainer(Tabs);

export default class App extends React.Component {

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

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

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

推荐阅读