Taro中常见问题(二)

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第7天，点击查看活动详情

1、自定义导航栏配置

• navigationStyle: "custom"：小程序顶部自定义样式。
• Taro.getMenuButtonBoundingClientRect()：获取菜单按钮（右上角胶囊按钮）的布局位置信息。坐标信息以屏幕左上角为原点。
• wx.getSystemInfo：获取系统信息，statusBarHeight为状态栏的高度，screenHeight为屏幕高度，windowHeight为可使用窗口高度。

设置小程序顶部自定义样式app.config.js

export default {
  pages: [
    // ...
  ],
  window: {
    navigationStyle: "custom",
    // ...
  },
}

设置全局变量app.js

• 胶囊按钮与顶部的距离navTop
• 导航高度navHeight
• 屏幕高度warpperHeight
• 可使用窗口高度windowHeight
• 主背景颜色bgColor

import React, { Component } from 'react'
import Taro from '@tarojs/taro'
// ...
class App extends Component {
  constructor() {
    super();
    this.state = {
      navHeight: 88,
      navTop: 0,
      windowHeight: 0,
      bgColor: '#66C785',
      warpperHeight: 0,
    }
  }
  // 可以使用所有的 React 生命周期方法
  componentDidMount() {
    let that = this
    let menuButtonObject = Taro.getMenuButtonBoundingClientRect();
    Taro.getSystemInfo({
      success: function (res) {
        let statusBarHeight = res.statusBarHeight,
            warpperHeight = res.screenHeight,
            navTop = menuButtonObject.top, //胶囊按钮与顶部的距离
            navHeight = statusBarHeight + menuButtonObject.height + (menuButtonObject.top - statusBarHeight) * 2; //导航高度
        that.setState({
          navHeight,
          navTop,
          warpperHeight,
          windowHeight: res.windowHeight
        })
      }
    })
  }
  render() {
    // 在入口组件不会渲染任何内容，但我们可以在这里做类似于状态管理的事情
    return ( 
      <Provider store={store}>
        {this.props.children}
      </Provider>
    )
  }

封装自定义导航栏

• Taro.getCurrentPages()：获取当前的页面栈，通过判断页面栈大于1则显示返回按钮
• icon：可自定义左侧图标
• title和titleColor：自定义标题和标题文字颜色

import React, { useEffect, useState } from 'react'
import { View } from '@tarojs/components'
import './index.less'
import Taro, { useReady } from '@tarojs/taro'
import Icon from '@/components/myIcon/index.weapp'

function Index (props) {
  const app = Taro.getApp();
  const { navHeight, navTop } = app.$app.state;
  const { icon, title, bgColor = "#009F5C", titleColor = "#fff" } = props;
  const [pagesLength, setPagesLength] = useState(1)
  const navBack = () => {
    Taro.navigateBack({
      delta: 1
    })
  }
  useReady(() => {
    let pages = Taro.getCurrentPages()
    setPagesLength(pages?.length)
  })
  return (
    <View class="navbar" style={{ 'height': navHeight + 'px', 'backgroundColor': bgColor }}>
      <View class="navbar-action-wrap" style={{ 'top': navTop + 'px' }}>
        {pagesLength > 1 && <Icon name="zuo" size="22" color={titleColor}  handleControl={() => navBack()} />}
        {icon}
      </View>
      <View class='navbar-title' style={{ 'top': navTop + 'px', "color": titleColor }}>{title}</View>
    </View>
  )
}

export default Index

2、使用iconfont自定义图标组件

• iconfont新建图标项目，添加到项目，下载文件，官网地址

• index.less引入iconfont.less

@import './iconfont/iconfont.less';

.my-font {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #fff;
  display: inline-block;
}

• handleIconControl：点击图标设置回调函数

import React, { useEffect, useState } from 'react'
import { View } from '@tarojs/components'
import './index.less'
import Taro from '@tarojs/taro'

function Index (props) {
  const { name = '', size = '32', color = '#fff', handleControl, weight = 'normal' } = props;
  const handleIconControl = () => {
    handleControl && handleControl()
  }
  return (
    <View
      class={`my-font icon${name}`}
      style={`color: ${color};font-size:${size}px; font-weight: ${weight};`}
      onClick={() => handleIconControl()}
    >
    </View>
  )
}

export default Index