1. 安装相关所需要的库
npm install @react-navigation/native
npm install @react-navigation/bottom-tabs
npm install @react-navigation/stack
package.json 文件生成如下
2.在app入口文件设置引用
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
3.初始化
// 引入需要的组件
import {
Text,
View,
Image,
} from 'react-native';
//初始化基础路由
const Stack = createStackNavigator(); //基础路由
const Tab = createBottomTabNavigator(); //tab页面路由
4.导入需要展示跳转的组件
import home from './pages/home /index'; // 确保路径正确 (tab首页
import tab2 './pages/tab2 /index'; // 确保路径正确 (tab第2页面
import HelloWorld from './pages/hello/hello'; // 确保路径正确
import Hi from './pages/hello/hi'; // 确保路径正确
import MyComponent from './pages/apii'; // 确保路径正确
5. 设置项目基础路由设置
function App(): React.JSX.Element {
return (
<NavigationContainer>
<Stack.Navigator mode="modal">
<Stack.Screen name="home" options={{title:'消息',headerShown: false}} component={TabBar} />
<Stack.Screen name="hello " options={{title:'用户列表'}} component={HelloWorld }/>
<Stack.Screen name="hi" options={{title:'所有订单'}} component={Hi}/>
</Stack.Navigator>
</NavigationContainer>
);
}
//headerShown 隐藏默认头部name文字显示
//NavigationContainer 需要在根部,否则页面会有问题
//Stack.Screen 配置的是我需要路由跳转的页面
6.在第一个路由配置里设置编写TabBar页面
function TabBar(){
return(
<Tab.Navigator
screenOptions={({route})=>({
tabBarIcon:({focused,size,color})=>{
let icon;
//自定义tabbar 样式图片
if(route.name==="消息"){
icon = focused ?
(
<Image
source={ require('./asstes/images/home1.png') }
style={{ width: 25, height: 25, }} />
) : ( <Image
source={ require('./asstes/images/home.png') }
style={{ width: 25, height: 25, }} />)
}
return icon;
}
})}
>
<Tab.Screen name="消息" component={Message} options={{
tabBarLabel: '消息',
headerShown: false, // 这里设置为false隐藏标题
}}/>
<Tab.Screen name="我的" component={MyComponent} options={{
tabBarLabel: '我的',
// tabBarIcon: ({ color, size }) => (
// <Ionicons name="home" color={color} size={size} />
// ),
headerShown: false, // 这里设置为false隐藏标题
}}/>
</Tab.Navigator>
)
}
tabbar页面
现在tabbar页面设置以及点击跳转就已经可以实现了
7.实现基础路由页面跳转
在需要跳转的组件内添加方法
例如:
const Home= ({navigation}) => { const renderItem = ({ item }) => <Item navigation={navigation} title={item.title} sTitle={item.sTitle} dtime={item.dtime}/>; return ( <View style={[styles.container,tw`bg-white`]}> <Button title="Go to Details" onPress={() => navigation.navigate('hello')} /> </View> ); };