react-native 路由概括版本(0.63.4)

老渔夫_

已于 2022-03-01 16:25:10 修改

阅读量914

点赞数

文章标签： react.js react native

于 2022-03-01 16:23:56 首次发布

本文链接：https://blog.csdn.net/weixin_48403384/article/details/123186630

版权

import React, {useEffect, useState, useContext} from 'react';
import {Button, Icon} from '@ant-design/react-native';

import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';
import {createDrawerNavigator} from '@react-navigation/drawer';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
import {createMaterialTopTabNavigator} from '@react-navigation/material-top-tabs';

// 普通堆栈导航
import Publish from './pages/publish/Publish';
// 侧滑导航
import CreatePin from './pages/publish/createPin';
// tabbar导航
import Mine from './pages/mine/mine';
// 首页顶部导航
import Circle from './pages/circle/Circle';
import Follow from './pages/follow/Follow';


const Stack = createStackNavigator();
const Drawer = createDrawerNavigator();
const Tab = createBottomTabNavigator();
const TopTab = createMaterialTopTabNavigator();

const HomeTabTop = (props) =>{
    const theme = useContext(ThemeContext)
    return (
        <TopTab.Navigator initialRouteName={'Circle'} >
            <Tab.Screen name="Circle" component={Circle} options={{title: '推荐'}} />
            <Tab.Screen name="Follow" component={Follow} options={{title: '关注'}} />
        </TopTab.Navigator>
        )
}


const TabBar = () => {
    return (
        <Tab.Navigator
            initialRouteName={'Home'}>
            <Tab.Screen options={
                {
                    tabBarLabel: '广场',
                    tabBarIcon: ({color, size}) => (<Icon name="chrome" color={color} size={size}/>),
                }
            } name="Home" component={HomeTabTop}/>
            <Tab.Screen options={
                {
                    tabBarLabel: '我的',
                    tabBarIcon: ({color, size}) => (<Icon name="user" color={color} size={size}/>),
                }
            } name="Mine" component={Mine}/>
        </Tab.Navigator>
    );
};

const Router = () => {
    let [initialRouteName, setInitialRouteName] = useState('MyDrawer');

    useEffect(() => {
        setInitialRouteName('MyDrawer');
    }, []);

    return (
        <NavigationContainer>
            <Stack.Navigator mode="card"
                             initialRouteName={initialRouteName}>
                <Stack.Screen name="MyDrawer" initialParams={{theme}}  component={MyDrawer}/>
                <Stack.Screen name="Publish" component={Publish}/>
                <Stack.Screen name="CreatePin" component={CreatePin}/>
            </Stack.Navigator>
        </NavigationContainer>
    );
};

const MyDrawer = () => {
    return (
        <Drawer.Navigator
            initialRouteName="TabBar">
            <Drawer.Screen name="TabBar" initialParams={{theme}} component={TabBar}/>
        </Drawer.Navigator>
    );
};

export default Router;

react-native 是一个跨端开发方案在国外依旧火热、与Flutter比较来说，Flutter当然渲染性能更好，但是RN有着恐怖如斯的社区支持，多到令人发指的插件和技术支持，市面上见到的几乎所有问题都能找到解决方法。语法运用的是react

也有不少人支持uniapp，这里不做过多对比，用过的都知道...

RN最劝退人的就是版本差异大，一不小心就容易下错版本插件，插件版本过高项目就容易崩溃，启动不起来，报的错也不容易找(也许是我太菜) ，在此说明版本号很重要！！！

以0.63.4版本为例

首先安装路由插件推荐yarn
npm 其实也可以但是注意 npm 和yarn 混用会出现各种奇奇怪怪的问题，建议不要混用

npx react-native init myProject --version 0.63.4  // 新建0.63.4版本RN项目

安装依赖

yarn add @react-navigation/native@5.9.2
yarn add react-native-reanimated@2.2.4 
yarn add react-native-gesture-handler@2.2.0 
yarn add react-native-screens@2.17.1 
yarn add react-native-safe-area-context@3.1.9 
yarn add @react-native-community/masked-view@0.1.10

创建堆栈路由 (必须)

yarn add @react-navigation/stack@5.14.2

import {createStackNavigator} from '@react-navigation/stack';

const Stack = createStackNavigator();

创建侧滑导航 (根据项目需求)

yarn add @react-navigation/drawer@5.12.9

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

const Drawer = createDrawerNavigator();

创建底部 (根据项目需求)

yarn add @react-navigation/bottom-tabs@5.11.15

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

const Tab = createBottomTabNavigator();

创建顶部tab切换(根据项目需求)

yarn add @react-navigation/material-top-tabs@5.3.19

import {createMaterialTopTabNavigator} from '@react-navigation/material-top-tabs';

const TopTab = createMaterialTopTabNavigator();

创建路由文件

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


+
..... 根据需导入对应的路由也可以全部导入
+

堆栈

const Router = () => {
    return (
        <NavigationContainer>  // 所有对应路由必须用此标签包裹
            <Stack.Navigator mode="card" initialRouteName={'MyDrawer'}>
                <Stack.Screen name="MyDrawer" component={MyDrawer}/>
                <Stack.Screen name="Home" component={Home}/> // 对应的页面文件 name 为跳转时                                                                        对应的名称
            </Stack.Navigator>
        </NavigationContainer>
    )
};

export default Router;


侧滑

const Router = () => {
    return (
        <NavigationContainer> 
            <Drawer.Navigator initialRouteName="TabBar">
                <Drawer.Screen name="TabBar" component={TabBar}/>
            </Drawer.Navigator>
        </NavigationContainer>
    )
};

export default Router;

tabbar

const Router = () => {
    return (
        <NavigationContainer>  // 所有对应路由必须用此标签包裹
            <Tab.Navigator initialRouteName={'Mine'}>
                <Tab.Screen name="Mine" component={Mine}/>
                <Tab.Screen name="Home" component={Home}/>                                                                   
            </Tab.Navigator>
        </NavigationContainer>
    )
};

export default Router;

顶部tab切换页

const Router = () => {
    return (
        <NavigationContainer>  // 所有对应路由必须用此标签包裹
            <TopTab.Navigator initialRouteName={'Circle'}>
                 <Tab.Screen name="Circle" component={Circle} />
            <Tab.Screen name="Follow" component={Follow} />                                                                 
            </TopTab.Navigator>
        </NavigationContainer>
    )
};

路由嵌套

多种路由可以嵌套使用例如 tabbar的首页页面里边增加侧滑且首页顶部需要添加tab栏切换

话不多说上代码

import React, {useEffect, useState, useContext} from 'react';
import {Button, Icon} from '@ant-design/react-native';

import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';
import {createDrawerNavigator} from '@react-navigation/drawer';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
import {createMaterialTopTabNavigator} from '@react-navigation/material-top-tabs';

// 普通堆栈导航
import Publish from './pages/publish/Publish';
// 侧滑导航
import CreatePin from './pages/publish/createPin';
// tabbar导航
import Mine from './pages/mine/mine';
// 首页顶部导航
import Circle from './pages/circle/Circle';
import Follow from './pages/follow/Follow';

const Stack = createStackNavigator();
const Drawer = createDrawerNavigator();
const Tab = createBottomTabNavigator();
const TopTab = createMaterialTopTabNavigator();

const HomeTabTop = () =>{
    return (
        <TopTab.Navigator initialRouteName={'Circle'}>
            <Tab.Screen name="Circle" component={Circle}/>
            <Tab.Screen name="Follow" component={Follow}/>
        </TopTab.Navigator>
        )
}


const TabBar = () => {
    return (
        <Tab.Navigator
            initialRouteName={'Home'}>
            <Tab.Screen options={
                {
                    tabBarLabel: '广场',
                    tabBarIcon: ({color, size}) => (<Icon name="chrome" color={color} size={size}/>),
                }
            } name="Home" component={HomeTabTop}/>
            <Tab.Screen options={
                {
                    tabBarLabel: '我的',
                    tabBarIcon: ({color, size}) => (<Icon name="user" color={color} size={size}/>),
                }
            } name="Mine" component={Mine}/>
        </Tab.Navigator>
    );
};

const Router = () => {
    const theme = useContext(ThemeContext)
    let [initialRouteName, setInitialRouteName] = useState('MyDrawer');

    useEffect(() => {
        setInitialRouteName('MyDrawer');
    }, []);

    return (
        <NavigationContainer>
            <Stack.Navigator mode="card"
                             initialRouteName={initialRouteName}>
                <Stack.Screen name="MyDrawer" initialParams={{theme}} component={MyDrawer}/>
                <Stack.Screen name="Publish"  component={Publish}/>
                <Stack.Screen name="CreatePin" component={CreatePin}/>
            </Stack.Navigator>
        </NavigationContainer>
    );
};
const MyDrawer = () => {
    return (
        <Drawer.Navigator
            initialRouteName="TabBar"
        >
            <Drawer.Screen name="TabBar" component={TabBar}/>
        </Drawer.Navigator>
    );
};

export default Router;

路由跳转

对应的页面文件中 props 可以解构出来 navigation

navigation.navigate('home')

或者使用

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

const navigation = useNavigation();

navigation.navigate('Publish')

每个导航都可以在对应注册的页面中增加一个顶部标题栏例如

标题栏可以设置不显示或自定义样式

Stack 默认展示

Stack.Navigator 可以设置 screenOptions 属性 设置标题的样式及左侧区域返回键右侧区域按钮的自定义形式

headerTitleAlign 文字是否居中

headerStyle 样式

headerTitleStyle 文字样式

headerLeft:()=>(<Node />) 左侧区域

headerRight:()=>(<Node />) 右侧区域

Stack.Screen options={{headerShown: false}} 去除顶部标题栏

Drawer 侧滑可以设置自定义样式

Drawer.Navigator  drawerContent 属性 drawerContent :()=>(<Node />) 自定义样式

TopTab.Navigator 顶部切换

tabBar={props => <CustomHomeTopTabs {...props} />} 自定义顶部切换样式

其他路由配置项还有很多在官网查看

官网连接 https://reactnavigation.org/docs/getting-started/

老渔夫_

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
react-native 路由概括版本(0.63.4)

底部tabbar 路由侧滑路由顶部tab切换、react-native对于初学者确实不太友好，单路由跳转就劝退大把的新手(本人也是菜鸡、根据翻阅的文档和自己经验记录一下)、希望可以帮助初学入手
复制链接

扫一扫