React Navigation 5.x BottomTab 使用
底部Tab导航
基本使用
导入
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
使用方式和Stack类似
const RootTab = createBottomTabNavigator();
return (
<RootTab.Navigator screenOptions={screenOptionss} tabBarOptions={tabBarOptions}>
<RootTab.Screen name="Home" component={HomeScreen} options={{ tabBarBadge: 3, title: "首页" }}
/>
<RootTab.Screen name="Settings" options={{ tabBarBadge: 3, title: "设置" }} component={Setting} />
</RootTab.Navigator>
)
- screenOptionss ,tabBarOptions 在这里可以对底部导航进行整体的一个属性控制
const screenOptionss = ({ route }) => {
return {
tabBarIcon: ({ focused, color, size }) => {
let img = require('./mine.png')
//根据组件名称加载不同的图片
if (route.name == "Home") {
img = require('./mine.png')
} else {
img = require('./message.png')
}
//可以返回任何组件
return <Image source={img}
style={[style.icon, { tintColor: color }]} />
},
}
}
//文本选中和非选中颜色 不会影响icon
const tabBarOptions = {
activeTintColor: 'tomato',
inactiveTintColor: 'gray',
}
内嵌StackNavigator
一般tab都和stack结合使用,大多数从tab页跳转到其他页面需要隐藏tab底部栏,官方推荐tab嵌入到stack中
return (
<NavigationContainer>
{
<Stack.Navigator screenOptions={{headerShown:true}}>
<Stack.Screen name="Tab" component={HomeTab} options={{title:"首页"}} />
<Stack.Screen name="List" component={ListScreen} />
<Stack.Screen name="Profile" component={ProfileScreen} />
</Stack.Navigator>
</NavigationContainer>
)
HomeTab
function HomeTab(params) {
const RootTab = createBottomTabNavigator();
//....
return (
<RootTab.Navigator screenOptions={screenOptionss} tabBarOptions={tabBarOptions}>
<RootTab.Screen name="Home" component={HomeScreen} options={{ tabBarBadge: 3, title: "首页" }}
/>
<RootTab.Screen name="Settings" options={{ tabBarBadge: 3, title: "设置" }} component={Setting} />
</RootTab.Navigator>
)
}
这样在HomeTab内嵌入stack中,所以在切换页面的时候还需要处理下导航栏(各个Tab页面共用的一个导航栏)
如下监听点击tab事件 改变标题 (这里使用dangerouslyGetParent()来获取stack的navigation)
class Setting extends Component {
//...
componentDidMount() {
//监听点击tab事件 改变标题
this.unsubscribe = this.props.navigation.addListener('tabPress', e => {
// Prevent default action
this.props.navigation.dangerouslyGetParent().setOptions({title:"设置"})
});
}
componentWillUnmount(){
this.unsubscribe ();
}
//...
}
分类:
ReactNative
标签:
React-Native
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 智能桌面机器人:用.NET IoT库控制舵机并多方法播放表情
· Linux glibc自带哈希表的用例及性能测试
· 深入理解 Mybatis 分库分表执行原理
· 如何打造一个高并发系统?
· .NET Core GC压缩(compact_phase)底层原理浅谈
· 手把手教你在本地部署DeepSeek R1,搭建web-ui ,建议收藏!
· 新年开篇:在本地部署DeepSeek大模型实现联网增强的AI应用
· 程序员常用高效实用工具推荐,办公效率提升利器!
· Janus Pro:DeepSeek 开源革新,多模态 AI 的未来
· 【译】WinForms:分析一下(我用 Visual Basic 写的)