Как показать пользовательский вид в нижней части экрана для всего приложения (как и для каждого экрана) в приложении «Нативный»

Question

Я занимаюсь разработкой реактивно-нативного проекта.Я новичок в реакции-родной.У меня есть один экран, который показывает плоский список, в этом плоском списке, показывающем, что каждая ячейка имеет некоторый аудио URL.После того, как пользователь нажмет на URL, мы должны показать аудиопроигрыватель в нижней части экрана.И мы должны показать элементы управления, такие как воспроизведение / пауза / остановка, индикатор выполнения, фоновые обои и название дорожки.

Кроме того, если пользователь переходит на другой экран и если аудиопроигрыватель воспроизводит звук, я должен поддерживать этот нижний аудиопроигрыватель.каждый экран.

Я в основном из разработки для iOS, в iOS мы знаем, что можем определить этот вид снизу в классе делегата приложения, но, в действительности, как это реализовать и как поддерживать это состояние воспроизведения аудио /стоп?Есть предложения?

Answer 1

Учитывая, что вы используете React Navigation, одним из подходов может быть рендеринг компонента вне контейнера вашего приложения.Примерно так:

const Tabs = createBottomTabNavigator(
    ...
);

const Navigation = createAppContainer(Tabs);

export default class App extends React.Component {

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

Где <AudioPlayer/> обозначает воспроизведение, паузу и т. Д. В нижней части экрана.

Затем вы можете контролировать (показывать / скрывать / обновлять состояние и т.