react-navigation 5.x 使用记录

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow strict-local
 */
import 'react-native-gesture-handler';
//  yarn start --reset-cache

import React from 'react';
import {
  StyleSheet,
  Text,
  StatusBar,
  ScrollView,
  View,
  SafeAreaView,
  TouchableOpacity,
  DeviceEventEmitter
} from 'react-native';
import { NavigationContainer } from '@react-navigation/native';

// 导航
import { createStackNavigator } from '@react-navigation/stack';
const Stack = createStackNavigator()

// tabbar
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import Home from './src/pages/home'
import Chat from './src/pages/chat'
import Contact from './src/pages/contact'
import FriendCircle from './src/pages/friendCircle'
import Mine from './src/pages/mine'
const Tab = createBottomTabNavigator();

// 侧边栏
import { createDrawerNavigator } from '@react-navigation/drawer';
const Drawer = createDrawerNavigator();

// 所有的页面都写在这里面
import HomeDetail from './src/pages/home/homeDetail'
import ChatDetail from './src/pages/chat/chatDetail'
import ContactDetail from './src/pages/contact/contactDetail'
import FriendCircleDetail from './src/pages/friendCircle/friendCircleDetail'
import MineDetail from './src/pages/mine/mineDetail'
import MineCenter from './src/pages/mine/mineCenter'
import Login from './src/pages/login'
import TransitionalPage from './src/pages/transitionalPage'
const routes = [
  {
    name:'HomeDetail',
    component:HomeDetail,
    title:'首页详情'
  },
  {
    name:'ChatDetail',
    component:ChatDetail,
    title:'聊天详情'
  },
  {
    name:'ContactDetail',
    component:ContactDetail,
    title:'联系人详情'
  },
  {
    name:'FriendCircleDetail',
    component:FriendCircleDetail,
    title:'朋友圈详情'
  },
  {
    name:'MineDetail',
    component:MineDetail,
    title:'我的详情'
  },
  {
    name:'MineCenter',
    component:MineCenter,
    title:'用户中心'
  }
]

// 遍历得到页面
function RenderRoutes(params) {
  return routes.map((item)=>{
    return <Stack.Screen key={item.name} name={item.name} component={item.component} options={{
      title:item.title
    }}/>
  })
}

// TransitionalPage 默认显示,此为过渡页面。在里面判断登录状态，然后reset到相应的页面
// 打开app即进入给页面
function StackNavigator() {
  return <Stack.Navigator>
    <Stack.Screen name={'TransitionalPage'} component={TransitionalPage}/>
    <Stack.Screen name={'TabNavigator'} component={TabNavigator}/>
    <Stack.Screen name={'Login'} component={Login}/>
    {RenderRoutes()}
  </Stack.Navigator>
}

// tabbar
function TabNavigator() {
  return <Tab.Navigator>
    <Tab.Screen name={'Home'} component={Home} options={{title:'首页'}}/>
    <Tab.Screen name={'Chat'} component={Chat} options={{title:'聊天'}}/>
    <Tab.Screen name={'Contact'} component={Contact} options={{title:'联系人'}}/>
    <Tab.Screen name={'FriendCircle'} component={FriendCircle} options={{title:'朋友圈'}}/>
    <Tab.Screen name={'Mine'} component={Mine} options={{title:'我的'}}/>
  </Tab.Navigator>
}

// 自定义侧边栏
function CustomDrawerContent({ navigation }) {
  return <View style={{backgroundColor:'red',flex:1,justifyContent:'center',alignItems:'center'}}>
    <TouchableOpacity onPress={()=>{
      navigation.closeDrawer();
      navigation.navigate('MineChatCenter')
    }}>
      <Text>点击跳转到用户中心</Text>
    </TouchableOpacity>
  </View>
}

// 侧边栏啊
function DrawerNavigator(params) {
  return <Drawer.Navigator drawerStyle={{
      width: 140, // 侧边栏宽度
    }}
    drawerContent={(props) => <CustomDrawerContent {...props} />} // 自定义侧边栏样式
    drawerType={'slide'}
    edgeWidth={200}// 默认左侧侧滑宽度
  >
    <Drawer.Screen name={'StackNavigator'} component={StackNavigator}/>
  </Drawer.Navigator>
}


export default App=()=>{
    return (
      <NavigationContainer>
        <DrawerNavigator/>
      </NavigationContainer>
  );
};

const styles = StyleSheet.create({
});