Taro学习-自定义导航栏

开发过程中常用到一些自定义封装的组建，这里以导航栏为例。

首先改造下app.jsx

window: {
  navigationStyle: 'custom',
  backgroundTextStyle: 'light',
  navigationBarBackgroundColor: '#fff',
}

创建自定义的组件Navbar

import Taro from '@tarojs/taro'
import { View } from '@tarojs/components'
import './index.scss'
class Navbar extends Taro.Component {
  render() {
    const style = {
      paddingTop: Taro.$navBarMarginTop + 'px'
    }
    const { title } = this.props
    return (
      <View className='navbarWrap' style={style}>
        <View className='navbar'>{title}</View>
      </View>
    );
  }
}
export default Navbar

引用

import NavBar from '../../components/Navbar/index'

...
<NavBar title='首页'></NavBar>
...