我的仓库地址:https://gitee.com/ruanjianbianjing/bj-hybrid
react-navigation:
学习文档:https://reactnavigation.org
安装核心包:
npm install @react-navigation/native
安装@react-navigation/native本身依赖的相关包:
-
react-native-screens:使用原生代码实现screen容器可以提高性能流畅度
-
react-native-safe-area-context:可以让我们的组件渲染在一个安全的区域(比如有些移动设备是异性的,刘海屏、挖孔屏等)
npx expo install react-native-screens react-native-safe-area-context
npm install @react-navigation/native @react-navigation/native-stack @react-navigation/bottom-tabs
入口文件(我的是App.js)引入NavigationContainer
import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
export default function App() {
return (
<NavigationContainer>{/* Rest of your app code */}</NavigationContainer>
);
}
小图标:
网址:https://icons.expo.fyi/Index
引入方式:
@expo/vector-icons
//举个例子
import { Ionicons } from "@expo/vector-icons";
如何使用堆栈导航器:
安装核心库:
npm install @react-navigation/stack
目录结构:(创建Home和Detail)
home组件:
import { useState } from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';
const Home = ({navigation}) => {
const goDetail = () => {
navigation.navigate('detail', { data: 'pass data' })
}
return (
<View style={{flex: 1}}>
<Button
title='to detail'
onPress={goDetail('detail')}
/>
</View>
)
}
const styles = StyleSheet.create({
});
export default Home
Getail组件:
import React from "react";
import { Text } from "react-native";
const Detail = () => {
return (
<div>
<Text>详情eee</Text>
</div>
);
};
export default Detail;
App.js
import { StatusBar, Text, StyleSheet, View } from "react-native";
import "./global";
import { NavigationContainer } from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-stack"; //堆栈导航器
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
//page下的组件
import Home from "./src/page/Home";
import Detail from "./src/page/Detail";
//两个小图标
import { AntDesign } from "@expo/vector-icons";
import { Ionicons } from "@expo/vector-icons";
const Stack = createNativeStackNavigator();
const Tab = createBottomTabNavigator();
//Screen路由,也是页面
//Navigator导航器
export default function App() {
return (
<NavigationContainer>
<Tab.Navigator>
{/* 首页 */}
<Tab.Screen name="homeScreen" component={HomeScreen} />
{/* 个人中心页 */}
<Tab.Screen name="setting" component={Setting} />
</Tab.Navigator>
<StatusBar />
</NavigationContainer>
);
}
const styles = StyleSheet.create({
});
页面之间实现跳转:
在`Home`组件中,您可以添加一个按钮或者其他交互元素,然后在点击事件中使用`navigation.navigate`方法来进行页面跳转:
import { Button } from 'react-native';
const Home = ({ navigation }) => {
return (
<View>
<Button
title="Go to Detail Page"
onPress={() => navigation.navigate('detail')}
/>
</View>
);
};
在上面的示例中,当点击按钮时,会调用`navigation.navigate('detail')`来跳转到`Detail`页面。
下面是代码展示:
import { StatusBar, Text, StyleSheet, View } from "react-native";
// import Home from './src/page/Home';
import "./global";
import { getFocusedRouteNameFromRoute } from "@react-navigation/native";
import { NavigationContainer } from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-stack"; //堆栈导航器
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import Home from "./src/page/Home";
import Detail from "./src/page/Detail";
import { AntDesign } from "@expo/vector-icons";
import { Ionicons } from "@expo/vector-icons";
const Stack = createNativeStackNavigator();
const Tab = createBottomTabNavigator();
const HomeScreen = () => {
return (
<Stack.Navigator>
<Stack.Screen
name="home"
component={Home}
options={{
title: "首页",
tarBarIcon: ({ color, size }) => (
<AntDesign name="home" size={size} color={color} />
),
}}
/>
<Stack.Screen name="detail" component={Detail} />
</Stack.Navigator>
);
};
export default function App() {
return (
<NavigationContainer>
<Tab.Navigator
screenOptions={{
headerShown: false,
}}
>
<Tab.Screen
name="homeScreen"
component={HomeScreen}
options={{
title: "首页",
tabBarIcon: ({ color, size }) => (
<Ionicons name="home" size={size} color={color} />
),
}}
/>
<Tab.Screen name="setting" component={Setting} />
</Tab.Navigator>
<StatusBar />
</NavigationContainer>
);
}
const styles = StyleSheet.create({});
tips:
headerMode="none"没有标题栏
headerMode="screen"每个页面都有一个标题栏(Android的默认)
使用headerStyle
import { StatusBar, Text, StyleSheet, View } from "react-native";
// import Home from './src/page/Home';
import "./global";
import { getFocusedRouteNameFromRoute } from "@react-navigation/native";
import { NavigationContainer } from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-stack"; //堆栈导航器
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import Home from "./src/page/Home";
import Detail from "./src/page/Detail";
import { AntDesign } from "@expo/vector-icons";
import { Ionicons } from "@expo/vector-icons";
const Stack = createNativeStackNavigator();
const Tab = createBottomTabNavigator();
const HomeScreen = () => {
return (
<Stack.Navigator
screenOptions={{
headerStyle: {
backgroundColor: "#f4511e",
},
headerTitleAlign: "center",
headerTintColor: "#fff",
headerTitleStyle: {
fontWeight: "bold",
},
}}
>
<Stack.Screen
name="home"
component={Home}
options={{
title: "首页",
tarBarIcon: ({ color, size }) => (
<AntDesign name="home" size={size} color={color} />
),
}}
/>
<Stack.Screen name="detail" component={Detail} />
</Stack.Navigator>
);
};
const Setting = () => <Text>设置页面</Text>;
export default function App() {
return (
<NavigationContainer>
<Tab.Navigator
screenOptions={{
headerShown: false,
}}
>
<Tab.Screen
name="homeScreen"
component={HomeScreen}
options={{
title: "首页",
tabBarIcon: ({ color, size }) => (
<Ionicons name="home" size={size} color={color} />
),
}}
/>
<Tab.Screen name="setting" component={Setting} />
</Tab.Navigator>
<StatusBar />
</NavigationContainer>
);
}
const styles = StyleSheet.create({});
页面跳转之间传参,还有隐藏下方的小图标:
import { StatusBar, Text, StyleSheet, View } from "react-native";
// import Home from './src/page/Home';
import "./global";
import { getFocusedRouteNameFromRoute } from "@react-navigation/native";
import { NavigationContainer } from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-stack"; //堆栈导航器
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import Home from "./src/page/Home";
import Detail from "./src/page/Detail";
import { AntDesign } from "@expo/vector-icons";
import { Ionicons } from "@expo/vector-icons";
const Stack = createNativeStackNavigator();
const Tab = createBottomTabNavigator();
const HomeScreen = () => {
return (
<Stack.Navigator
screenOptions={{
headerStyle: {
backgroundColor: "#f4511e",
},
headerTitleAlign: "center",
headerTintColor: "#fff",
headerTitleStyle: {
fontWeight: "bold",
},
}}
>
<Stack.Screen
name="home"
component={Home}
options={{
title: "首页",
tarBarIcon: ({ color, size }) => (
<AntDesign name="home" size={size} color={color} />
),
}}
/>
<Stack.Screen name="detail" component={Detail} />
</Stack.Navigator>
);
};
const Setting = () => <Text>设置页面</Text>;
// 变量
const screens = ["home", "set", "useinfo"];
// tabbar是否要显示
const tabbarIsVisible = (route) => {
const routeName = getFocusedRouteNameFromRoute(route);
// console.log(routeName);
return screens.includes(routeName);
};
export default function App() {
return (
<NavigationContainer>
<Tab.Navigator
screenOptions={{
headerShown: false,
}}
>
<Tab.Screen
name="homeScreen"
component={HomeScreen}
options={
// 让options返回函数
({ route }) => {
// console.log(route);
// 这是一个函数,需要引入,把它移动到上面的tabbarIsVisible函数里面
// const routeName = getFocusedRouteNameFromRoute(route);
return {
// 这行以下是非函数的
title: "首页",
tabBarIcon: ({ color, size }) => (
<Ionicons name="home" size={size} color={color} />
),
// 每个tab项有一个自己的属性
tabBarStyle: {
// display: routeName !== "home" ? "none" : "block",
// 换成函数调用
display: tabbarIsVisible(route) ? "block" : "none",
},
};
}
}
/>
<Tab.Screen name="setting" component={Setting} />
</Tab.Navigator>
<StatusBar />
</NavigationContainer>
);
}
const styles = StyleSheet.create({});
最终效果展示:(视频地址)
https://www.bilibili.com/video/BV1ZJ4m1L7ED/?vd_source=49ac986e62578cbc7593a58345567513