2023react navigation方法怎么用

 所属分类:web前端开发

 浏览:164次-  评论: 0次-  更新时间:2023-01-10
描述:更多教程资料进入php教程获得。 react navigation会在所有注册路由页面的props里面注入navigation,其使用方法:1、通过“const Main =...
更多教程资料进入php教程获得。

react navigation会在所有注册路由页面的props里面注入navigation,其使用方法:1、通过“const Main = createStackNavigator({...})”方式创建主路由;2、通过“createBottomTabNavigator”创建底部标签栏;3、通过“createSwitchNavigator”创建特殊switch路由等。

本教程操作环境:Windows10系统、react18.0.0版、Dell G3电脑。

react navigation方法怎么用?

react-navigation 常用方法

react-navigation是rn项目使用路由管理器;除了提供路由history管理,还有导航器的ui组件!;

react-navigation会在所有注册路由页面的props里面注入navigation!!!

1.创建主路由;

createStackNavigator

其中包括项目中所使用的基本所有的页面路由;

const Main = createStackNavigator({
    Tab: {
        screen: Tab,
        navigationOptions:{
            header:null
        }
    }
     。。。
},{
    initialRouteName :'Tab',   
})
登录后复制

2.创建底部标签栏;

createBottomTabNavigator

即app首页底部的几个tab分页

const Tab = createBottomTabNavigator({
    Home: {
        screen: Home,
        navigationOptions:{
            header:null,
            title:'最热',
            tabBarIcon:({focused,tintColor})=>{
                return (
                    <MCIcon name="chili-hot"  size={16} color = {focused?tintColor:'#404040'}></MCIcon>
                )
            }    
        }
    },
   。。。
},{
    initialRouteName :'Home',
    tabBarOptions:{
        activeTintColor:'#1d85d0' 
    }
})
登录后复制

3.创建特殊switch路由; 跳转之前的页面将不会进入history堆栈;

createSwitchNavigator
//欢迎页跳转不可返回
const Navigation = createSwitchNavigator({
    Init:Init,
    Main:Main
},{
    initialRouteName :'Init'
})
登录后复制

4.创建顶部tab页标签,会占用导航栏位置

createMaterialTopTabNavigator
export default class Home extends Component {
  render() {
    const TabNav = createMaterialTopTabNavigator({
      Tab1:{
        screen: Tab1,
        navigationOptions:{
            title:'tab1',
            header:null
        }
      }
。。。
   
    },{。。。}) 
    return (
      <TabNav/>
    ) 
  }
}
登录后复制

5.navigationOptions常用的配置属性

headerTtile: 页面标题

headerTitleStyle: 标题文字的样式

headerStyle:标题整块的样式

6.tab部分的参考属性

tabBarOptions - 具有以下属性的对象:
activeTintColor -活动选项卡的标签和图标颜色。
activeBackgroundColor -活动选项卡的背景色。
inactiveTintColor -"非活动" 选项卡的标签和图标颜色。
inactiveBackgroundColor -非活动选项卡的背景色。
showLabel -是否显示选项卡的标签, 默认值为 true。
showIcon - 是否显示 Tab 的图标,默认为false。
style -选项卡栏的样式对象。
labelStyle -选项卡标签的样式对象。
tabStyle -选项卡的样式对象。
allowFontScaling -无论标签字体是否应缩放以尊重文字大小可访问性设置,默认值都是 true。
safeAreaInset - 为 <SafeAreaView> 组件重写 forceInset prop, 默认值:{ bottom: 'always', top: 'never' }; top | bottom | left | right 的可选值有: 'always' | 'never'。
登录后复制

BottomTabBar组件也可以草考这个属性

7.制作返回功能

通常我们在需要返回的页面上使用 this.props.navigation 获取到navigation 的props对象;

可以使用

this.props.navigation.goBack()
登录后复制

来返回页面;但是这样做的前提是 this.props.navgation必须是当前页面的navigation;即可以查看 this.props.navigation.state.routeName 来判断:

某些特殊的情况下,比如安卓返回键的返回判断有可能返回事件不是在该页面捕获,因为回退事件BackHandler是会向上传递的; 那么this.props.navigation可能就不是需要回退的压面的navigation对象了;所以已使用go.Back()是不会成功的;或者有些情况下naviagtion对象不一定有goBack()方法 也会造成这个问题;

例如;

home页面是一级路由,detail页面是二级路由,两个页面都设置了BackHandler的回调函数;若detai里面的BackHandler没有被当前页面捕获的话就会传递给home里面的BackHandler回调函数;那么在home里的 this.props.navigation就是指的home页面的,而不是detail,所以调用goBack也不会成功!!!

解决方法:

使用NavigationActions ;

所有NavigationActions返回可以使用navigation.dispatch()方法发送到路由器的对象。

支持以下操作:

Navigate - 导航到另一条路由

Back - 回到之前的状态

Set Params - 设置给定路由的参数

Init - 用于在状态未定义时初始化第一个状态

具体看文档:https://reactnavigation.org/docs/zh-Hans/navigation-actions.html

通过:

dispatch(NavigationActions.back());
登录后复制

就可以实行返回操作了;

注意:

dispatch()方法是在 this.props.navigation里面的

推荐学习:《react视频教程》

以上就是react navigation方法怎么用的详细内容,更多请关注zzsucai.com其它相关文章!

 标签: navigation,React,
积分说明:注册即送10金币,每日签到可获得更多金币,成为VIP会员可免金币下载! 充值积分充值会员更多说明»

讨论这个素材(0)回答他人问题或分享使用心得奖励金币

〒_〒 居然一个评论都没有……

表情  文明上网,理性发言!