专栏首页木子墨的前端日常react-navigation 使用笔记 持续更新中

react-navigation 使用笔记 持续更新中

目录

  • 基本使用(此处基本使用仅针对导航头部而言,不包含tabbar等)
  • header怎么和app中通信呢?

React-Navigation是目前React-Native官方推荐的导航组件,代替了原用的Navigator。最近开始接触,做个笔记


基本使用(此处基本使用仅针对导航头部而言,不包含tabbar等)

基础使用主要包括两部分

组件引入与定义路由

组件引入后,可以通过提供的api createStackNavigator来创建路由,每个路由元素都是一个对象

import { createStackNavigator } from 'react-navigation';
export default createStackNavigator({
  Home: {
    screen: App
  },
  Demos: {
    screen: demo
  },
  DebugList: DebugList,
  DebugDetail: DebugDetail
})

自定义header内容

在每个具体的页面中,可以通过设置navigationOptions对象来对header进行一定程度的自定义

static navigationOptions={
  headerTintColor:'#000',
  headerTitle: (
    <Text style={{ flex: 1, textAlign: 'center', color: '#222222', fontSize: px2dp(18)}}>调试demo</Text>
  ),
  headerRight: <View/>
};
--or--
static navigationOptions = ({ navigation, screenProps }) => {
  return {
    headerTintColor:'#000',
    headerTitle: (
      <Text style={{ flex: 1, textAlign: 'center', color: '#222222', fontSize: px2dp(18) }}>网络日志</Text>
    ),
    // 这里之所以要判断 是因为在生命周期最开始的时候 这个params我们还没给他绑定点击事件
    headerRight: <View><Text onPress={navigation.state.params?navigation.state.params.navigatePress:null}>清空</Text></View>
  }
}

可以通过对象或者函数两种形式进行定义,函数定义时自带两个参数navigation和screenProps。其中navigation主要是路由传参内容,screenProps主要是在定义router的时候带着的参数,一会再把navigationOptions的具体属性补充一下TODO

header怎么和app中通信呢?

小白踩坑后知道navigationOptions中是不能直接访问reactComponent中的this对象的,因此也就不能直接和reactComponent进行通信,这个时候怎么办呢?答案就是操作navigation对象,我们可以通过在组件中重新定义navigation参数params的形式来处理,比如

static navigationOptions = ({ navigation, screenProps }) => {
  return {
    headerTintColor:'#000',
    headerTitle: (
      <Text style={{ flex: 1, textAlign: 'center', color: '#222222', fontSize: px2dp(18) }}>网络日志</Text>
    ),
    // 这里之所以要判断 是因为在生命周期最开始的时候 这个params我们还没给他绑定点击事件
    headerRight: <View><Text onPress={navigation.state.params?navigation.state.params.navigatePress:null}>清空</Text></View>
  }
}
componentDidMount() {
  this.props.navigation.setParams({
    navigatePress:this._clearStorage
  })
}
_clearStorage = () => {
  global.storage.remove({
    key:'netLog'
  }).then((logs) => {
    console.log('data removed')
    this.setState(previousState => {
      return {
        logList: []
      }
    })
  })
}

而在组件中去调用头部的内容时,也是主要去查询navigation这个对象中的state和params两个参数,先到这 上个厕所

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • React-Native开发笔记 持续更新

    1、css单位转换px2dp 在做页面开发的时候习惯了用rem去做css单位,处理各种尺寸数据,到了React-Native里面做app开发时,rem就不好用...

    木子墨
  • 跨域相关

    跨域是前端开发中经常遇到的一个问题,主要是由于请求的源地址与目标地址不同源产生的问题。下面我们就深入的了解和学习一下有关跨域的那些事儿。

    木子墨
  • 到底该用img还是background-image?

    在前端页面的实现过程中,我们经常会遇到这个情况:有一个盒子,盒子里面需要放一张图片。这个时候,我们既可以通过添加image标签来实现,也可以通过设置背景图的形式...

    木子墨
  • 【专知荟萃23】深度强化学习RL知识资料全集(入门/进阶/论文/综述/代码/专家,附查看)

    【AlphaGoZero核心技术】深度强化学习专知荟萃 【AlphaGoZero核心技术】深度强化学习专知荟萃 基础入门 进阶文章 Papers Papers ...

    WZEARW
  • elasticsearch常用操作url 原

    尚浩宇
  • 前端开发常用资源

    子勰
  • Yii2 学习笔记之发送邮件

    琯琯
  • Redis5.x哨兵搭建手记

    Redis5.x之后,单机、哨兵、集群搭建的难度已经简化。鉴于目前看到太多文章都是复制粘贴以往一些3.x版本的一些内容,所以打算基于当前Redis的最新版本做一...

    Throwable
  • R语言进行机器学习方法及实例(一)

      机器学习的研究领域是发明计算机算法,把数据转变为智能行为。机器学习和数据挖掘的区别可能是机器学习侧重于执行一个已知的任务,而数据发掘是在大数据中寻找有价值的...

    用户1680321
  • C++并发高级接口:std::async和std::future

    std::async创建一个后台线程执行传递的任务,这个任务只要是callable object均可,然后返回一个std::future。future储存一个多...

    racaljk

扫码关注云+社区

领取腾讯云代金券