react-native - 如何在其他屏幕上制作屏幕或组件

Question

我正在制作一个音乐应用程序，我想做的是实现一个可以在所有其他屏幕上活动的音乐播放器屏幕，如下所示： https ://reactnativeexample.com/react-native-swipe-up-down-零件/

这是我的 app.js：

import React, {Component} from 'react';
import { createDrawerNavigator, createStackNavigator, createAppContainer } from "react-navigation";

import HomeScreen from './screens/home';
import SideBar from './screens/sidebar';
import SongScreen from './screens/song';

const Drawer = createDrawerNavigator(
  {
    Home: {screen: HomeScreen}
  },
  {
    initialRouteName: "Home",
    contentOptions: {
      activeTintColor: "#e91e63"
    },
    contentComponent: props => <SideBar {...props} />
  }
);

const AppNavigator = createStackNavigator(
  {
    Drawer: { screen: Drawer },
    SongScreen: { screen: SongScreen }
  },
  {
    initialRouteName: "Drawer",
    headerMode: "none"
  }
);

const AppContainer = createAppContainer(AppNavigator);

export default class App extends Component {

  render() {
    return (
      <AppContainer />
    );
  }

}

标签： react-nativereact-navigation

Answer 1

使用https://github.com/octopitus/rn-sliding-up-panel并使您的根屏幕如下所示：

<View>
 <AppContainer/>
 <SlidingUpPanel/>
</View