react-navigation中TabNavigator切换时重新渲染

逃离我推掉我的手 2022-02-01 10:57 535阅读 1赞

在使用 react-navigation时（版本如下）  
react-navigation": "1.5.11",  
假设2个tab页，A与B

登陆之后默认呈现A页面，通过触摸底部B切换B页面。

A与B页面只在第一次进入时执行react生命周期函数，请求数据并渲染，二次切换页面时并不会触发。

如果有二次查询的需求时，可按照如下方法进行。

假设需要每次点击B页面都需要查询数据并渲染。

1.在B页面中添加如下代码

componentDidMount() {
      this._queryData();
      this.props.navigation.setParams({ queryData: () => { this._queryData(); } });//在导航中添加查询数据的方法，设置一个钩子
    }

2.在tab页面设置B页面属性中添加tabBarOnPress方法即可。

B: {
          screen: BPage,
          navigationOptions: () => ({
            tabBarLabel: 'B页面',
            tabBarIcon: ({ tintColor }) => (
              <IconFontAwesome name="calendar-check-o" size={26} style={
       { color: tintColor }} />
            ),
            tabBarOnPress: (obj) => {
              // 任务数据redux修改，点击每次查询
              if (obj.scene.route.params && obj.scene.route.params.queryList) {
                obj.scene.route.params.queryList();//查询数据
              }
              obj.jumpToIndex(obj.scene.index);//跳转B页面
            },
          }),
        },

发表评论取消回复

表情：

评论列表（有 0 条评论，535人围观）

还没有评论，来说两句吧...

相关阅读

相关避免react重新渲染

段时间一个面试官问我如何避免react重新渲染，当场很懵逼，因为看深入浅出react技术栈这本书的时候，是酱紫讲的：当修改props或者state，diff能够自动计算组...

淩亂°似流年/ 2024年04月19日 09:40/ 0 赞/ 73 阅读

相关【Vue】dialog打开时重新渲染

在 Vue 中打开 dialog 常用的方法是使用 el-dialog 控件。当 dialog 打开时，常常需要重新渲染对应的内容。这个功能可以通过监听 visible 属性实

你的名字/ 2024年03月17日 16:04/ 0 赞/ 90 阅读

相关 uniapp 重新渲染组件

在 uni-app 中，可以使用 $forceUpdate() 方法强制重新渲染组件。例如： <template> <view>{

古城微笑少年丶/ 2023年09月25日 16:06/ 0 赞/ 31 阅读

相关强制 Vue 重新渲染组件

有时候，依赖 vue 响应方式来更新数据是不够的，相反，我们需要手动重新渲染组件来更新数据。或者，我们可能只想抛开当前的DOM，重新开始。那么，如何让vue以正确的方式重新呈现

迈不过友情╰/ 2023年01月02日 13:29/ 0 赞/ 278 阅读

相关 uni-app中如何重新渲染子组件

uni-app中如何重新渲染子组件 this.hackReset = false; this.$nextTick(() => {

本是古典何须时尚/ 2022年12月10日 08:58/ 0 赞/ 970 阅读

相关 echart重新渲染（新）

我看别人写的博文并不管用，自己看了api研究了一会，各位码子们，见证奇迹的时刻到了 myChart.clear();//消除当前实例 //option.col

绝地灬酷狼/ 2022年10月24日 11:42/ 0 赞/ 406 阅读

相关 echarts 重新渲染(重新绘制,重新加载数据)

mychart.setOption(option,true) 如果如上方案不生效，请查看下面文章 https://www.ji

朱雀/ 2022年04月15日 02:43/ 0 赞/ 1613 阅读

相关 react-navigation中TabNavigator切换时重新渲染

在使用 react-navigation时（版本如下） react-navigation": "1.5.11", 假设2个tab页，A与B 登陆之后默认呈现A页面，通

逃离我推掉我的手/ 2022年02月01日 10:57/ 1 赞/ 536 阅读

相关 easyUI,重新渲染

Easyui中使用jquery或js动态添加元素时出现的样式失效的解决方法可以使用$.parser.parse();这个方法进行处理；例如： $.parse

水深无声/ 2021年06月24日 14:00/ 0 赞/ 588 阅读

相关 Vue中如何正确强制组件重新渲染？

Vue中如何正确强制组件重新渲染？有时候，依赖 Vue 响应方式来更新数据是不够的，相反，我们需要手动重新渲染组件来更新数据。或者，我们可能只想抛开当前的DOM，重新开...

朱雀/ 2020年07月01日 20:07/ 0 赞/ 1062 阅读