自定义 tabbar 在微信小程序真机预览不显示 (Taro3.0.8)

zrain commented 4 years ago

复现步骤

编译运行
点击预览
点击真机预览【手机系统 iOS 设备 iPhoneX 】

Failed to connect to github.com port 443: Operation timed out 网络不好 demo 没上传

这里问题已经解决，主要想给后来小伙伴加个备注

按照 taro 的方式书写

app.config.js

tabBar: {
        custom: true,
        color: '#B8BAC0',
        selectedColor: '#000000',
        backgroundColor: '#FFFFFF',
        borderStyle: 'white',
        position: 'bottom',
        list: [
            {
                pagePath: 'pages/home/home',
                iconPath: 'image/test_1.png',
                selectedIconPath: 'image/test_11.png',
                text: '首页'
            },
            {
                pagePath: 'pages/chosen/chosen',
                iconPath: 'image/test_1.png',
                selectedIconPath: 'image/test_11.png',
                text: '精选'
            },
            {
                pagePath: 'pages/mine/mine',
                iconPath: 'image/test_1.png',
                selectedIconPath: 'image/test_11.png',
                text: '我的'
            }
        ]
}

custom-tab-bar/index.jsx

const CustomTabBar = () => {
    const activePath = useSelector(state => state.app.tabbar.activePath);

    const result = list.find(item => item.pagePath === activePath) || {};
    const { id: activeId = 1 } = result;

    return (
        <CoverView className="custom-tab-bar-container safe-area-bottom">
            <CoverView className="custom-tab-bar-inner">
                {list.map(({ id, icon, selectedIcon, text, pagePath }) => {
                    const classes = classNames('custom-tab-item', {
                        selected: activeId === id
                    });

                    const computedIcon = activeId === id ? selectedIcon : icon;

                    const onClickHandler = () => {
                        Taro.switchTab({ url: pagePath });
                    };

                    return (
                        <CoverView
                            className={classes}
                            onClick={onClickHandler}
                            key={id}
                        >
                            <CoverImage
                                className="custom-icon"
                                src={computedIcon}
                            />
                            <CoverView className="custom-text">
                                {text}
                            </CoverView>
                        </CoverView>
                    );
                })}
            </CoverView>
        </CoverView>
    );
};

export default CustomTabBar;

在编译预览后，预览模式，和上传预览模式都正常的前提下

解决方法如下：：：：

注意在 custom-tab-bar/index.config.js 增加

    export default {
        component:  true
    }

期望结果

真机预览正常显示

实际结果

预览 - 显示 tabbar 真机预览 - 不显示 tabbar 上传预览 - 显示 tabbar

环境信息

👽 Taro v3.0.8

  Taro CLI 3.0.8 environment info:
    System:
      OS: macOS 10.15.5
      Shell: 5.7.1 - /bin/zsh
    Binaries:
      Node: 12.11.1 - ~/.nvm/versions/node/v12.11.1/bin/node
      Yarn: 1.22.4 - /usr/local/bin/yarn
      npm: 6.12.0 - ~/.nvm/versions/node/v12.11.1/bin/npm
    npmPackages:
      @tarojs/components: ^3.0.8 => 3.0.8
      @tarojs/mini-runner: ^3.0.8 => 3.0.8
      @tarojs/react: ^3.0.8 => 3.0.8
      @tarojs/runtime: ^3.0.8 => 3.0.8
      @tarojs/taro: ^3.0.8 => 3.0.8
      @tarojs/webpack-runner: ^3.0.8 => 3.0.8
      babel-preset-taro: ^3.0.8 => 3.0.8
      eslint-config-taro: ^3.0.8 => 3.0.8
      react: ^16.10.0 => 16.13.1
      taro-ui: 3.0.0-alpha.3 => 3.0.0-alpha.3

补充信息

预览设备 iOS iPhoneX

toozhuang commented 3 years ago

果然是这样, 我的 custom-tabbar 是 Page()类型的, 在本地/手机扫描预览都OK, 但到真机调试就出没有tabbar显示.

谢谢了 :)

angeltxwh commented 3 years ago

@zrain 大佬你是怎么解决的，我的/custom-tab-bar/index.config.ts是下面这样的，也写了component: true，为啥还是真机不显示

export default { component: true }

Tonysmark commented 3 years ago

custom-tab-bar 需要和 pages 目录平齐 --- custom-tab-bar --- pages

NervJS / taro