2. RN笔记 - 路由(react-navigation)

RN笔记 - 路由(react-navigation)

官方文档

路由分三种

• stack 栈路由
• tab 标签路由 (tabBar)
• draw 抽屉式

暂时只记录 stack 和 tab路由

准备工作

• 安装包

  npm i @react-navigation/native
  

• 安装相关依赖

  npm i react-native-screens react-native-safe-area-context
  

• 安装路由

  npm i @react-navigation/native-stack
  npm i @react-navigation/bottom-tabs
  npm i @react-navigation/drawer
  

stack路由

// 引入stack路由创建函数
import {createNativeStackNavigator} from "@react-navigation/native-stack";
// 引入路由容器
import { NavigationContainer } from '@react-navigation/native';
// 创建一个路由
const Stack = createNativeStackNavigator();
// 测试React页面
function Test(){
    return <View>
        <Text>Test</Text>
    </View>
}
// 测试React页面2
function Home(){
    return <View>
        <Text>Home</Text>
    </View>
}
// stack路由配置
function StackRouter(){
    // Stack.Navigator包裹路由配置
    return <Stack.Navigator>
        {/*单路由配置*/}
        {/*name: 路由名称*/}
        {/*Components: 路由组件*/}
        {/*options: 路由配置项*/}
        <Stack.Screen name={"home"} options={{headerShown:false}} component={Home} />
        <Stack.Screen name={"test"} component={Test} />
    </Stack.Navigator>
}
// 最后使用路由容器整合路由
export default function(){
    return <NavigationContainer>
    		`<StackRouter/>
    </NavigationContainer>
}

stack路由参数及配置

tab路由

// 引入路由创建函数
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
// 引入路由容器
import { NavigationContainer } from '@react-navigation/native';
// 创建Tab路由
const Tab = createBottomTabNavigator();
function Tab1(){
    return <View><Text>tab1</Text></View>
}
function Tab2(){
    return <View><Text>tab2</Text></View>
}
function Tab3(){
    return <View><Text>tab3</Text></View>
}
// 配置Tab路由
function TabBar(){
    return <Tab.Navigation>
        <Tab.Screen name={"tab1"} options={{title:"测试1"}} component={Tab1} />
        <Tab.Screen name={"tab2"} options={{title:"测试2"}} component={Tab2} />
        <Tab.Screen name={"tab3"} options={{title:"测试3"}} component={Tab3} />	
    </Tab.Navigation>
}
export default function (){
    return <NavigationContainer>
    	<TabBar />
    </NavigationContainer>
}

tab路由的props及配置

配置TabBar的icon以及颜色

function TabBar(){
    return
    <Tab.Navigation 
        screenOptions={({route})=>{
            return {
                tabBarLabelPosition:"below-icon",
                tabBarIcon:({focused, color, size})=>{
                    let icons :any = {
                        home:"icon-tianqi-yintian",
                        communicate:"icon-tianqi-xiaoyu",
                        mine:"icon-juxiezuo"
                    }
                    // color的其他配置方式
                    // let colors :string|undefined = focused?theme.primary:theme.font || "#333";
                    return <Icon name={icons[route.name]} color={color} size={30}/>
                },
                tabBarActiveTintColor:theme.primary,
                tabBarInactiveTintColor:theme.font
            }
        }}
        >
        <Tab.Screen name={"tab1"} options={{title:"测试1"}} component={Tab1} />
        <Tab.Screen name={"tab2"} options={{title:"测试2"}} component={Tab2} />
        <Tab.Screen name={"tab3"} options={{title:"测试3"}} component={Tab3} />	
    </Tab.Navigation>
}

组合路由

// 引入stack路由创建函数
import {createNativeStackNavigator} from "@react-navigation/native-stack";
// 引入路由容器
import { NavigationContainer } from '@react-navigation/native';
// 引入路由创建函数
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
// 引入路由容器
import { NavigationContainer } from '@react-navigation/native';
// 创建一个路由
const Stack = createNativeStackNavigator();
// 创建Tab路由
const Tab = createBottomTabNavigator();
// 测试React页面
function Test(){
    return <View>
        <Text>Test</Text>
    </View>
}
// 测试React页面2
function Home(){
    return <View>
        <Text>Home</Text>
    </View>
}
function Tab1(){
    return <View><Text>tab1</Text></View>
}
function Tab2(){
    return <View><Text>tab2</Text></View>
}
function Tab3(){
    return <View><Text>tab3</Text></View>
}
// 配置Tab路由
function TabBar(){
    return <Tab.Navigation>
        <Tab.Screen name={"tab1"} options={{title:"测试1"}} component={Tab1} />
        <Tab.Screen name={"tab2"} options={{title:"测试2"}} component={Tab2} />
        <Tab.Screen name={"tab3"} options={{title:"测试3"}} component={Tab3} />	
    </Tab.Navigation>
}
// stack路由配置
function StackRouter(){
    // Stack.Navigator包裹路由配置
    return <Stack.Navigator>
        <Stack.Screen name={"tabBar"} options={{headerShown:false}} component={TabBar} />
        <Stack.Screen name={"test"} component={Test} />
    </Stack.Navigator>
}

export default function (){
    return <NavigationContainer>
    	<StackRouter />
    </NavigationContainer>
}

hooks 函数式编程使用路由

// 引入导航和路由钩子函数
import {useNavigation, useRoute} from "@react-navigation/native"
function hooks(props){
    // 使用钩子函数 , 获取navigation对象
    let navigation = useNavigation();
    // 使用钩子函数 , 获取当前路由
    let route = useRoute();
    return <view>
        {/*路由跳转*/}
    	<Button onPress={()=>navigation.push("home")} title={"跳转"} />
    </view>
}	

navigation的参数

navigation.push() // 加入历史栈并跳转
navigation.replace() // 跳转并替换当前历史
...

route参数