feat: add Navigator,实现了底部导航栏和头部导航栏

Author: dupeiyi

App.tsx

@@ -1,82 +1,16 @@
-/**
- * App的入口文件，这里作为渲染系统入口和登录的一个占位
- * @format
+/*
+ * @Author: bugdr
+ * @Date: 2022-07-09 22:07:01
+ * @LastEditors: bugdr
+ * @LastEditTime: 2022-07-11 14:09:19
+ * @FilePath: \SunOfBeacheRN\App.tsx
+ * @Description:App的入口文件，这里作为渲染系统入口和登录的一个占位
  */
-
-import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
-import { NavigationContainer } from '@react-navigation/native';
-import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import React from 'react';
-import { Text, StyleSheet, View, Button } from 'react-native';
-import Ionicons from 'react-native-vector-icons/Ionicons';
-import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context'; // 安全区域的插件
-
-function HomeScreen({ navigation }) {
- return (
- <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
- <Text>首页</Text>
- <Button title="去登录页面" onPress={() => navigation.navigate('Login')} />
- </View>
- );
-}
-
-function LoginScreen({ navigation }) {
- return (
- <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
- <Text>登录页面</Text>
- <Button title="去首页" onPress={() => navigation.navigate('Home')} />
- </View>
- );
-}
-
-// 创建一个路由栈
-const Stack = createNativeStackNavigator();
-// 底部导航栏
-const Tab = createBottomTabNavigator();
+import Navigation from './src/navigation';
 
 const App = () => {
- return (
- <>
- <SafeAreaProvider style={styles.container}>
- <NavigationContainer>
- <Tab.Navigator
- screenOptions={({ route }) => ({
- tabBarIcon: ({ focused, color, size }) => {
- let iconName;
-
- if (route.name === 'Home') {
- iconName = focused ? 'ios-information-circle' : 'ios-information-circle-outline';
- } else if (route.name === 'Login') {
- iconName = focused ? 'ios-list-box' : 'ios-list';
- }
-
- // You can return any component that you like here!
- return <Ionicons name={iconName} size={size} color={color} />;
- },
- tabBarActiveTintColor: 'tomato',
- tabBarInactiveTintColor: 'gray',
- })}
- >
- <Tab.Screen name="Home" component={HomeScreen} options={{ tabBarBadge: 10 }} />
- <Tab.Screen name="Login" component={LoginScreen} />
- </Tab.Navigator>
- </NavigationContainer>
- </SafeAreaProvider>
- </>
- );
+ return <Navigation />;
 };
 
-const styles = StyleSheet.create({
- container: {
- flex: 1,
- },
- baseText: {
- fontFamily: 'Cochin',
- },
- titleText: {
- fontSize: 20,
- fontWeight: 'bold',
- },
-});
-
 export default App;

src/navigation/BottomTabNavigator.tsx

@@ -0,0 +1,31 @@
+/*
+ * @Author: bugdr
+ * @Date: 2022-07-11 12:30:23
+ * @LastEditors: bugdr
+ * @LastEditTime: 2022-07-11 13:34:59
+ * @FilePath: \SunOfBeacheRN\src\navigation\BottomTabNavigator.tsx
+ * @Description:标签底部导航器
+ */
+import React from 'react';
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+import CollegeScreen from '../screens/CollegeScreen';
+import FishCakesScreen from '../screens/FishCakesScreen';
+import HomeScreen from '../screens/HomeScreen'; // 首页
+import MineScreen from '../screens/MineScreen';
+import RoundQuestionScreen from '../screens/RoundQuestionScreen';
+
+const BottomTab = createBottomTabNavigator();
+
+const BottomTabNavigator = () => {
+ return (
+ <BottomTab.Navigator initialRouteName="首页">
+ <BottomTab.Screen name="首页" component={HomeScreen} />
+ <BottomTab.Screen name="摸鱼" component={FishCakesScreen} />
+ <BottomTab.Screen name="问答" component={RoundQuestionScreen} />
+ <BottomTab.Screen name="学院" component={CollegeScreen} />
+ <BottomTab.Screen name="我的" component={MineScreen} />
+ </BottomTab.Navigator>
+ );
+};
+
+export default BottomTabNavigator;

src/navigation/StackNavigator.tsx

@@ -0,0 +1,27 @@
+/*
+ * @Author: bugdr
+ * @Date: 2022-07-11 12:30:53
+ * @LastEditors: bugdr
+ * @LastEditTime: 2022-07-11 14:12:48
+ * @FilePath: \SunOfBeacheRN\src\navigation\StackNavigator.tsx
+ * @Description:栈导航器，包括登录这些
+ */
+import React from 'react';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import BottomTabNavigator from './BottomTabNavigator';
+import Settings from '../views/Settings';
+
+const Stack = createNativeStackNavigator();
+
+const StackNavigator = () => {
+ return (
+ <>
+ <Stack.Navigator initialRouteName="首页">
+ <Stack.Screen name="首页" component={BottomTabNavigator} options={{ headerShown: false }} />
+ <Stack.Screen name="设置" component={Settings} options={{ headerShown: false }} />
+ </Stack.Navigator>
+ </>
+ );
+};
+
+export default StackNavigator;

src/navigation/index.tsx

@@ -0,0 +1,30 @@
+/*
+ * @Author: bugdr
+ * @Date: 2022-07-10 21:15:11
+ * @LastEditors: bugdr
+ * @LastEditTime: 2022-07-11 14:08:51
+ * @FilePath: \SunOfBeacheRN\src\navigation\index.tsx
+ * @Description:这是用户使用的页面，不包含登录等页面
+ */
+import React from 'react';
+import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context';
+import { NavigationContainer } from '@react-navigation/native';
+import StackNavigator from './StackNavigator';
+
+const Navigation = () => {
+ return (
+ <SafeAreaProvider initialMetrics={null}>
+ <SafeAreaView
+ style={{ flex: 1, backgroundColor: 'withe' }}
+ edges={['top', 'bottom', 'right', 'left']}
+ mode="padding"
+ >
+ <NavigationContainer>
+ <StackNavigator />
+ </NavigationContainer>
+ </SafeAreaView>
+ </SafeAreaProvider>
+ );
+};
+
+export default Navigation;

src/screens/CollegeScreen.tsx

@@ -0,0 +1,20 @@
+/*
+ * @Author: bugdr
+ * @Date: 2022-07-11 13:30:44
+ * @LastEditors: bugdr
+ * @LastEditTime: 2022-07-11 13:30:45
+ * @FilePath: \SunOfBeacheRN\src\screens\CollegeScreen.tsx
+ * @Description:学院模块
+ */
+import * as React from 'react';
+import { View, Text } from 'react-native';
+
+const CollegeScreen = () => {
+ return (
+ <View>
+ <Text>学院模块</Text>
+ </View>
+ );
+};
+
+export default CollegeScreen;

src/screens/FishCakesScreen.tsx

@@ -0,0 +1,20 @@
+/*
+ * @Author: bugdr
+ * @Date: 2022-07-11 13:26:50
+ * @LastEditors: bugdr
+ * @LastEditTime: 2022-07-11 13:27:09
+ * @FilePath: \SunOfBeacheRN\src\screens\FishCakesScreen.tsx
+ * @Description:摸鱼模块
+ */
+import * as React from 'react';
+import { View, Text } from 'react-native';
+
+const FishCakesScreen = () => {
+ return (
+ <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
+ <Text>摸鱼模块!</Text>
+ </View>
+ );
+};
+
+export default FishCakesScreen;

src/screens/HomeScreen.tsx

@@ -0,0 +1,20 @@
+/*
+ * @Author: bugdr
+ * @Date: 2022-07-11 13:24:04
+ * @LastEditors: bugdr
+ * @LastEditTime: 2022-07-11 13:27:13
+ * @FilePath: \SunOfBeacheRN\src\screens\HomeScreen.tsx
+ * @Description:首页模块
+ */
+import * as React from 'react';
+import { View, Text } from 'react-native';
+
+const HomeScreen = () => {
+ return (
+ <View>
+ <Text>首页模块</Text>
+ </View>
+ );
+};
+
+export default HomeScreen;

src/screens/MineScreen.tsx

@@ -0,0 +1,21 @@
+/*
+ * @Author: bugdr
+ * @Date: 2022-07-11 13:32:33
+ * @LastEditors: bugdr
+ * @LastEditTime: 2022-07-11 13:34:34
+ * @FilePath: \SunOfBeacheRN\src\screens\MineScreen.tsx
+ * @Description:我的模块
+ */
+import * as React from 'react';
+import { View, Text, Button } from 'react-native';
+
+const MineScreen = ({ navigation }) => {
+ return (
+ <View>
+ <Text>我的界面</Text>
+ <Button title="Go to setting" onPress={() => navigation.navigate('设置')} />
+ </View>
+ );
+};
+
+export default MineScreen;

src/screens/RoundQuestionScreen.tsx

@@ -0,0 +1,20 @@
+/*
+ * @Author: bugdr
+ * @Date: 2022-07-11 13:29:44
+ * @LastEditors: bugdr
+ * @LastEditTime: 2022-07-11 13:29:46
+ * @FilePath: \SunOfBeacheRN\src\screens\RoundQuestionScreen.tsx
+ * @Description:问答模块
+ */
+import * as React from 'react';
+import { View, Text } from 'react-native';
+
+const RoundQuestionScreen = () => {
+ return (
+ <View>
+ <Text>问答模块</Text>
+ </View>
+ );
+};
+
+export default RoundQuestionScreen;

src/screens/index.ts

@@ -0,0 +1,18 @@
+/*
+ * @Author: bugdr
+ * @Date: 2022-07-11 07:04:43
+ * @LastEditors: bugdr
+ * @LastEditTime: 2022-07-11 13:17:02
+ * @FilePath: \SunOfBeacheRN\src\screens\index.ts
+ * @Description:路由文件
+ */
+// 这里不在使用解析模块路径。因为没有必要使用
+// 获取到导航栏路由
+export const StacksScreens = [];
+
+// 底部导航标题
+export const BottomScreens = [
+ {
+ name: '',
+ },
+];