提交 5b4fbd10 编辑于 作者: zhuchuanyong's avatar zhuchuanyong
浏览文件

feat: tab navigation

上级 33d77043

App.tsx

+6 −4
原始行号 原始行 差异行号 差异行
@@ -2,7 +2,7 @@ 
 * @Author: zhuchuanyong

 * @Author: zhuchuanyong

 * @Date: 2021-01-22 15:13:57

 * @Date: 2021-01-22 15:13:57

 * @LastEditors: zhuchuanyong

 * @LastEditors: zhuchuanyong

 * @LastEditTime: 2021-01-26 10:29:46

 * @LastEditTime: 2021-01-27 11:25:08

 * @FilePath: \App.tsx

 * @FilePath: \App.tsx

 */

 */

/**

/**
@@ -15,16 +15,18 @@ 
 * @format

 * @format

 */

 */

import React from 'react';

import React from 'react';

import StackNavigation from './src/router/StackNavigation';

// import StackNavigation from './src/router/StackNavigation';

import TabsNavigation from './src/router/TabsNavigation';

// import TabsNavigation from './src/router/TabsNavigation';

import DrawerNavigation from './src/router/DrawerNavigation';





declare const global: {HermesInternal: null | {}};

declare const global: {HermesInternal: null | {}};





const App = () => {

const App = () => {

  return (

  return (

    <>

    <>

      <TabsNavigation />

      {/* <TabsNavigation /> */}

      {/* <StackNavigation /> */}

      {/* <StackNavigation /> */}

      <DrawerNavigation />

    </>

    </>

  );

  );

};

};

package.json

+1 −0
原始行号 原始行 差异行号 差异行
@@ -19,6 +19,7 @@ 
    "@react-native-community/viewpager": "^4.2.2",

    "@react-native-community/viewpager": "^4.2.2",

    "@react-native-picker/picker": "^1.9.10",

    "@react-native-picker/picker": "^1.9.10",

    "@react-navigation/bottom-tabs": "^5.11.7",

    "@react-navigation/bottom-tabs": "^5.11.7",

    "@react-navigation/drawer": "^5.12.3",

    "@react-navigation/native": "^5.9.2",

    "@react-navigation/native": "^5.9.2",

    "@react-navigation/stack": "^5.14.1",

    "@react-navigation/stack": "^5.14.1",

    "react": "16.13.1",

    "react": "16.13.1",

src/router/DrawerNavigation.js

0 → 100644
+28 −0
原始行号 原始行 差异行号 差异行 
/*

 * @Author: zhuchuanyong

 * @Date: 2021-01-27 11:19:42

 * @LastEditors: zhuchuanyong

 * @LastEditTime: 2021-01-27 11:37:35

 * @FilePath: \src\router\DrawerNavigation.js

 */



import React from 'react';

import {NavigationContainer} from '@react-navigation/native';

import {createDrawerNavigator} from '@react-navigation/drawer';

import DrawerPage from '../views/Drawer';

const Drawer = createDrawerNavigator();



export default function TabNavigation() {

  return (

    <NavigationContainer>

      <Drawer.Navigator initialRouteName="Home">

        <Drawer.Screen

          name="Home"

          options={{title: '123'}}

          component={DrawerPage}

        />

        {/* <Drawer.Screen name="Notifications" component={Details} /> */}

      </Drawer.Navigator>

    </NavigationContainer>

  );

}

src/router/TabsNavigation.js

+1 −2
原始行号 原始行 差异行号 差异行
@@ -2,10 +2,9 @@ 
 * @Author: zhuchuanyong

 * @Author: zhuchuanyong

 * @Date: 2021-01-26 10:17:27

 * @Date: 2021-01-26 10:17:27

 * @LastEditors: zhuchuanyong

 * @LastEditors: zhuchuanyong

 * @LastEditTime: 2021-01-27 11:07:54

 * @LastEditTime: 2021-01-27 11:24:03

 * @FilePath: \src\router\TabsNavigation.js

 * @FilePath: \src\router\TabsNavigation.js

 */

 */



import React from 'react';

import React from 'react';

import {NavigationContainer} from '@react-navigation/native';

import {NavigationContainer} from '@react-navigation/native';

import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';

import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';

src/views/Drawer.js

0 → 100644
+25 −0
原始行号 原始行 差异行号 差异行 
/*

 * @Author: zhuchuanyong

 * @Date: 2021-01-25 14:44:12

 * @LastEditors: zhuchuanyong

 * @LastEditTime: 2021-01-27 11:30:03

 * @FilePath: \src\views\Drawer.js

 */

import {Button} from '@ant-design/react-native';

import React from 'react';



const Home = (props) => {

  let {navigation} = props;

  const openDrawer = () => {

    navigation.openDrawer();

  };

  return (

    <>

      <Button type="primary" onPress={() => openDrawer()}>

        Drawer

      </Button>

    </>

  );

};



export default Home;