自定义tabBar

[Timson020]

问题描述 自定义tabBar 在页面组件内没有办法使用this.getTabBar 获取tabBar实例

而且页面内onShow的钩子函数没有被调用

示例代码

"react": "^16.12.0",
"react-dom": "^16.12.0",
"remax": "^2.0.7"

onShow() {
    console.info(this.getTabBar)
    console.info(wx.getTabBar)
}

componentDidMount() {
    console.info(this.getTabBar)
    console.info(wx.getTabBar)
}

参考资料 点击跳转

[Darmody]

可以通过 usePageInstance 这个 hook 拿到 Page 实例，就可以调用 getTabBar 了

[Timson020]

好的 我试下

[Timson020]

import React, { Component } from 'react'
import { usePageInstance } from 'remax'

class Page extends Component {
onShow() {
const instance = usePageInstance();
}

render () {
return <View></View>
}
}

我们业务逻辑的页面是class 没有使用到hook 有提供关于class的方法么

[Darmody]

class 没有额，看样子得包一层了

[Timson020]

怎么包一层 ？ 我现在是tab的页面改成hook模式 希望 class 能支持一下就最好了

[millievn]

怎么包一层 ？ 我现在是tab的页面改成hook模式 希望 class 能支持一下就最好了

解决了吗

[Timson020]

修改成hook模式 先暂时处理了

不过用class模式下 用redux 会报错 你有出现这个情况么 @qiwang97

[millievn]

你有出现这个情况么

之前使用的 taro 昨天才开始使用的 remax

本来计划使用anna-remax-ui 制作自定义的 tabbar ，但是点击跳转失败被我放弃了，换回原生。官方大法好

顺便问一句，方便提供一个 tabbar 的示例嘛 awesome-remax 系列缺少实际应用，简单 demo 学起来无从下手啊😢

[Timson020]

...... tabbar的用原生处理的就好啦 通过copy-webpack-plugin 直接 copy过去就好了

我之前都使用过taro 但是这个伪react 我没办法忍受.... 好多一些react的特性都用不了，我才转过来remax的

[Malarkey-Jhu]

想问下自订义TabBar要怎么实现，看了文档还是不知如何下手

[Timson020]

remax.config.js

const CopyPlugin = require('copy-webpack-plugin')
const Path = require('path')

const PLATFORM = process.env.REMAX_PLATFORM
const SRCPATH = Path.join(__dirname, './src')
const DISTPATH = Path.join(__dirname, `./dist/${PLATFORM}`)

const CopyPluginConfig = {
    patterns: [
        {
            from: `${SRCPATH}/assets`,
            to: `${DISTPATH}/assets`,
        },
        {
            from: Path.join(__dirname, './sitemap.json'),
            to: `${DISTPATH}/sitemap.json`,
        }
    ]
}

// 微信小程序自定义tabBar
if (PLATFORM === 'wechat') CopyPluginConfig.patterns.push({ from: `${SRCPATH}/custom-tab-bar`, to: `${DISTPATH}/custom-tab-bar` })

const webpackConfig = {
    one: true,
    output: `dist/${PLATFORM}`,
    pxToRpx: true,

    // config, webpack, addCSSRule
    configWebpack: function ({ config }) {
        config.plugin('custom-copy').use(CopyPlugin, [ CopyPluginConfig ])
    }
}

module.exports = webpackConfig

这个是我的demo config custom-tab-bar 用微信小程序的vue语法写 不能使用react的语法

[Darmody]

remax.config.js

const CopyPlugin = require('copy-webpack-plugin')
const Path = require('path')

const PLATFORM = process.env.REMAX_PLATFORM
const SRCPATH = Path.join(__dirname, './src')
const DISTPATH = Path.join(__dirname, `./dist/${PLATFORM}`)

const CopyPluginConfig = {
  patterns: [
      {
          from: `${SRCPATH}/assets`,
          to: `${DISTPATH}/assets`,
      },
      {
          from: Path.join(__dirname, './sitemap.json'),
          to: `${DISTPATH}/sitemap.json`,
      }
  ]
}

// 微信小程序自定义tabBar
if (PLATFORM === 'wechat') CopyPluginConfig.patterns.push({ from: `${SRCPATH}/custom-tab-bar`, to: `${DISTPATH}/custom-tab-bar` })

const webpackConfig = {
  one: true,
  output: `dist/${PLATFORM}`,
  pxToRpx: true,

  // config, webpack, addCSSRule
  configWebpack: function ({ config }) {
      config.plugin('custom-copy').use(CopyPlugin, [ CopyPluginConfig ])
  }
}

module.exports = webpackConfig

这个是我的demo config custom-tab-bar 用微信小程序的vue语法写 不能使用react的语法

直接放在 public 目录下，就可以copy过去了

[Timson020]

你自己喜欢而已 反正可以配置一个webpack的config

[Malarkey-Jhu]

恩恩放在public目录下，编译后会放到dist 目录底下，可以不用写webpack config 但又出现新的闪跳问题 🗡️

[dpyzo0o]

恩恩放在public目录下，编译后会放到dist 目录底下，可以不用写webpack config 但又出现新的闪跳问题 🗡️

请问闪跳问题是指?

[BongBongBang]

我想的也是用copy-webpack-plugin的拷贝实现的，但我的自定义tabbar里，需要依赖原生组件，这个usingComponent怎么写都依赖不到，楼主有遇到嘛？

[BongBongBang]

我想的也是用copy-webpack-plugin的拷贝实现的，但我的自定义tabbar里，需要依赖原生组件，这个usingComponent怎么写都依赖不到，楼主有遇到嘛？

哎，我放弃了，项目在赶着，确实没有时间再去看remax编译源码去改造了。 我这边遇到的就是custom-tab-bar的代码里，有依赖其他第三方的自定义组件，结果就是usingCompnents里的依赖路径没法写。最终暴力解决的，从dist/输出结果里查看其他编译后的路径，类比过来解决。

[hui2334387208]

这个自定义tabbar有写成功的吗？