百度 网站建设,网络广告营销方案,为什么我自己做的网站搜索不到,软件开发模型的优缺点及适用范围上一篇有讲到堆栈式导航器的写法#xff0c;点这里-堆栈式导航器标签导航器官网链接先安装依赖包yarn add react-navigation/bottom-tabs接着在src/navigator文件夹下新建BottomTabs.tsx文件,写法跟堆栈式导航器类似的~import React from react;
import { NavigationConta…上一篇有讲到堆栈式导航器的写法点这里-堆栈式导航器标签导航器官网链接先安装依赖包yarn add react-navigation/bottom-tabs接着在src/navigator文件夹下新建BottomTabs.tsx文件,写法跟堆栈式导航器类似的~import React from react;
import { NavigationContainer } from /react-navigation/native;
import { createBottomTabNavigator } from /react-navigation/bottom-tabs
import Home from /pages/Home;
import Listen from /pages/Listen;
import Found from /pages/Found;
import Account from /pages/Account;export type BottomTabParamList {Home:undefined;Listen:undefined;Found:undefined;Account:undefined;
}const Tab createBottomTabNavigatorBottomTabParamList()class BottomTabs extends React.Component {render() {return (NavigationContainerTab.NavigatorTab.Screen nameHome component{Home}/Tab.Screen nameListen component{Listen}/Tab.Screen nameFound component{Found}/Tab.Screen nameAccount component{Account}//Tab.Navigator/NavigationContainer)}
}export default BottomTabs;然后在src/index.tsx使用该导航器import Navigator from /navigator/BottomTabs;export default Navigator;如何更改为自定义的标签名字在options属性里修改NavigationContainerTab.NavigatorTab.Screen nameHome component{Home}options{{tabBarLabel:首页}}/Tab.ScreennameListen component{Listen} options{{tabBarLabel:我听}}/Tab.Screen nameFound component{Found} options{{tabBarLabel:发现}}/Tab.Screen nameAccount component{Account} options{{tabBarLabel:我的}}//Tab.Navigator
/NavigationContainer【改动后效果如下图】如何更改标签选中的颜色使用tabBarOptions属性NavigationContainerTab.Navigator tabBarOptions{{activeTintColor:#f86442,}}Tab.Screen nameHome component{Home}options{{tabBarLabel:首页}}/Tab.ScreennameListen component{Listen} options{{tabBarLabel:我听}}/Tab.Screen nameFound component{Found} options{{tabBarLabel:发现}}/Tab.Screen nameAccount component{Account} options{{tabBarLabel:我的}}//Tab.Navigator
/NavigationContainer如果要实现在首页里点击某处跳转到详情页要怎么实现呢这涉及到导肮嵌套将堆栈式导航器嵌套到标签导航器在首页里嵌套堆栈式导航器BottomTabs.tsximport React from react;
import { NavigationContainer } from /react-navigation/native;
import { createBottomTabNavigator } from /react-navigation/bottom-tabs
import Test from ./index; // 注意这里引入的是堆栈式导航器组件
import Listen from /pages/Listen;
import Found from /pages/Found;
import Account from /pages/Account;export type BottomTabParamList {Test:undefined; // 这里改一下Listen:undefined;Found:undefined;Account:undefined;
}const Tab createBottomTabNavigatorBottomTabParamList()class BottomTabs extends React.Component {render() {return (NavigationContainerTab.NavigatorTab.Screen nameTest component{Test}/Tab.Screen nameListen component{Listen}/Tab.Screen nameFound component{Found}/Tab.Screen nameAccount component{Account}//Tab.Navigator/NavigationContainer)}
}export default BottomTabs;修改堆栈式导航器index.tsx去掉NavigationContainerimport React from react;
import {NavigationContainer} from react-navigation/native
import {createStackNavigator} from react-navigation/stack
import Home from /pages/Home;
import Detail from /pages/Detail;
import {createStackNavigator,StackNavigationProp,
} from react-navigation/stack; // 自动引入type RootStackPareamList {Home: undefined; // 这里改一下Detail:undefined;
}export type RootStackNavigation StackNavigationPropRootStackPareamListconst Stack createStackNavigatorRootStackPareamList();
/*{Navigator, // 导航器Screen // 路由也就是页面
}
*/class Navigator extends React.Component {render(){return (Stack.NavigatorheaderModefloatscreanOptions{{headerTitleAlign:center,}}Stack.Screen options{{ headerTitleAlign:left, headerTitle:首页}} nameHome component{Home}/Stack.Screen nameDetail component{Detail}//Stack.Navigator);}
}export default Navigator;此时当在首页点击跳转详情页的时候就能实现跳转了下面的标签栏是不会消失的如果想在跳转的时候底部导航器消失要怎么做呢将标签导航器嵌套到堆栈式导航器修改标签导航器的代码问以下去掉NavigationContainerimport React from react;
import { NavigationContainer } from /react-navigation/native;
import { createBottomTabNavigator } from /react-navigation/bottom-tabs
import Home from /pages/Home; // 注意这里改回为Home组件
import Listen from /pages/Listen;
import Found from /pages/Found;
import Account from /pages/Account;export type BottomTabParamList {Home:undefined;Listen:undefined;Found:undefined;Account:undefined;
}const Tab createBottomTabNavigatorBottomTabParamList()class BottomTabs extends React.Component {render() {return (Tab.NavigatorTab.Screen nameHome component{Home}/Tab.Screen nameListen component{Listen}/Tab.Screen nameFound component{Found}/Tab.Screen nameAccount component{Account}//Tab.Navigator)}
}export default BottomTabs;将堆栈式导航器组件index.tsx还原到上一篇中的写法即不要去掉NavigationContainer然后引入标签导航器import React from react;
import {NavigationContainer} from react-navigation/native
import {createStackNavigator} from react-navigation/stack
// import Home from /pages/Home; // 注意这里改成引入标签导航器了
import BottomTabs from ./BottomTabs; // 引入标签导航器
import Detail from /pages/Detail;
import {createStackNavigator,StackNavigationProp,
} from react-navigation/stack; // 自动引入type RootStackPareamList {BottomTabs: undefined; // 这里改一下Detail:undefined;
}export type RootStackNavigation StackNavigationPropRootStackPareamListconst Stack createStackNavigatorRootStackPareamList();
/*{Navigator, // 导航器Screen // 路由也就是页面
}
*/class Navigator extends React.Component {render(){return (NavigationContainerStack.NavigatorheaderModefloatscreanOptions{{headerTitleAlign:center,}}Stack.Screen options{{ headerTitleAlign:left, headerTitle:首页}} nameBottomTabs component{BottomTabs}/Stack.Screen nameDetail component{Detail}//Stack.Navigator);}
}export default Navigator;然后在src/index.tsx中修改为使用堆栈式导航器因为是往堆栈式里嵌套了标签导航器所以本质上其实是使用了堆栈式导航器为主体import Navigator from /navigator/index;export default Navigator;现在为止就能实现跳转到详情页的时候底部标签导航器消失了但是会有一个问题当点击底部导航栏跳转的时候标题总是显示首页如下图所示如何动态修改标题栏在BottomTabs.tsx中增加以下代码import React from react;
import { NavigationContainer } from /react-navigation/native;
import { createBottomTabNavigator } from /react-navigation/bottom-tabs
import Home from /pages/Home;
import Listen from /pages/Listen;
import Found from /pages/Found;
import Account from /pages/Account;export type BottomTabParamList {Home:undefined;Listen:undefined;Found:undefined;Account:undefined;
}const Tab createBottomTabNavigatorBottomTabParamList() // 这里
type Route RoutePropRootStackParamList,BottomTabsstate?:TabNavigationState;
}// 这里
interface IProps { navigation: RootStackNavigation;route:RoutePropRootStackParamList,BottomTabs;
}// 增加一个获取标题名称的方法
function getHeaderTitle(route: Route) {const roureName route.state? route.state.routes[route.state.index].name: route.params?.screen || Home;switch(routeName) {case Home:return 首页;case Listen:return 我听;case Found:return 发现;case Account:return 账户;default:return 首页}
}class BottomTabs extends React.ComponentIProps{// props发生变化就会执行生命周期componentDidUpdate() {const {navigation,route} this.props;navigation.setOptions({headerTitle:getHeaderTitle(route),});}render() {return (Tab.NavigatorTab.Screen nameHome component{Home}/Tab.Screen nameListen component{Listen}/Tab.Screen nameFound component{Found}/Tab.Screen nameAccount component{Account}//Tab.Navigator)}
}export default BottomTabs;在index.tsx(堆栈式导航器)中增加以下代码import React from react;
import {NavigationContainer} from react-navigation/native
import {createStackNavigator} from react-navigation/stack
import BottomTabs from ./BottomTabs;
import Detail from /pages/Detail;
import {createStackNavigator,StackNavigationProp,
} from react-navigation/stack; // 自动引入type RootStackPareamList {BottomTabs: { // 这里改一下screen?: string; }; Detail:undefined;
}export type RootStackNavigation StackNavigationPropRootStackPareamListconst Stack createStackNavigatorRootStackPareamList();class Navigator extends React.Component {render(){return (NavigationContainerStack.NavigatorheaderModefloatscreanOptions{{headerTitleAlign:center,}}Stack.Screen // options{{headerTitle:首页}} 删掉这个属性因为需要动态修改nameBottomTabs component{BottomTabs}/Stack.Screen nameDetail component{Detail}//Stack.Navigator);}
}export default Navigator;效果如下
