На основе пользовательской панели навигации таро Navbar | имитация верхней навигации WeChat | пользовательская панель вкладок таро
В последние несколько дней я изучал таро и обнаружил, что на официальном сайте представлены кейсы H5 и малых программ, а кейсов RN очень мало. Так случилось, что у меня был опыт работы с реактивными и реактивно-нативными проектами, и после некоторых исследований я наконец понял, что его можно скомпилировать в несколько концов, но есть много ям, особенно проблемы со стилем в среде RN.
React имитирует чат веб-версии WeChat:blog.CSDN.net/вдоль улицы Синьюнь 19…
Как показано ниже: Все тесты пройдены в H5/Mini Program/RN
Все значки, используемые в проекте, являются значками шрифтов Ali iconfont.После загрузки скопируйте папку шрифтов в каталог проекта.
import './styles/fonts/iconfont.scss'
В h5 апплет можно записать так:<Text className="iconfont icon-back"></Text>
Однако для совместимости с RN его можно записать только в Unicode следующим образом:<Text className="iconfont"></Text>
Если передается по переменной:let back = '\ue84c' <Text>{back}</Text>
Пользовательская панель навигации Таро
Настройте navigationStyle в App.js, установите его на пользовательский, вы можете настроить панель навигации
class App extends Component {
config = {
pages:
'pages/index/index',
...
],
window: {
backgroundTextStyle: 'light',
navigationBarBackgroundColor: '#fff',
navigationBarTitleText: 'Taro',
navigationBarTextStyle: 'black',
navigationStyle: 'custom'
},
...
}
...
}
Создайте новый компонент панели навигации Navbar в каталоге компонентов.
/*
* @desc Taro自定义导航条navbar组件
* @about Q：282310962 wx：xy190310
*/
import Taro from '@tarojs/taro'
import { View, Text, Input, Image } from '@tarojs/components'
import classNames from "classnames";
import './index.scss'
export default class NavBar extends Taro.Component {
// 默认配置
static defaultProps = {
isBack: false,
leftIcon: '\ue84c',
title: ' ',
background: '#6190e8',
color: '#fff',
center: false,
search: false,
searchStyle: '',
fixed: false,
headerRight: [],
}
constructor(props) {
super(props)
this.state = {
searchText: '',
}
}
...
render() {
const { isBack, leftIcon, title, background, color, center, search, searchStyle, fixed, height, headerRight } = this.props
const { searchText } = this.state
let weapp = false
if (process.env.TARO_ENV === 'weapp') {
weapp = true
}
return (
<View className={classNames('taro__navbar', fixed && 'taro__navbar--fixed', fixed && weapp && 'taro__navbar-weapp--fixed')}>
<View className={classNames('taro__navbar-wrap', fixed && 'taro__navbar-wrap--fixed', weapp && 'taro__navbar-wrap__weapp')} style={{backgroundColor: background}}>
{/* 返回 */}
<View className={classNames('taro__navbar-left__view', isBack && 'taro__navbar-left__view--isback')}>
{isBack &&
<TouchView activeOpacity={.5} onClick={this.handleNavigateBack}>
<View className="taro__navbar-icon__item"><Text className="iconfont taro__navbar-iconfont" style={{color: color}}>{leftIcon}</Text></View>
</TouchView>
}
</View>
{/* 标题 */}
{!search && center && !weapp ? <View className="flex1" /> : null}
{search ?
(
<View className="taro__navbar-search flex1">
<Input className="taro__navbar-search__input" placeholder="搜索..." onInput={this.updateInputText} style={{color: color, ...searchStyle}} />
</View>
)
:
(
<View className={classNames('taro__navbar-title flex1', center && !weapp && 'taro__navbar-title--center')}>
{title && <Text className="taro__navbar-title__text" style={{color: color}}>{title}</Text>}
</View>
)
}
{/* 右侧 */}
<View className="taro__navbar-right__view">
{headerRight.map((item, index) => (
<TouchView activeOpacity={.5} key={index} onClick={()=>item.onClick && item.onClick(searchText)}>
<View className="taro__navbar-icon__item">
{item.icon && <Text className="iconfont taro__navbar-iconfont" style={{color: color, ...item.style}}>{item.icon}</Text>}
{item.text && <Text className="taro__navbar-iconfont__text" style={{color: color, ...item.style}}>{item.text}</Text>}
{item.img && <Image className="taro__navbar-iconfont__img" src={item.img} mode='aspectFit' />}
{/* 圆点 */}
{!!item.badge && <Text className="taro__badge taro__navbar-badge">{item.badge}</Text>}
{!!item.dot && <Text className="taro__badge-dot taro__navbar-badge--dot"></Text>}
</View>
</TouchView>
))
}
</View>
</View>
</View>
);
}
}
Вы можете импортировать компоненты на странице:import NavBar from '@components/navbar'
Поддержка пользовательского фона, цвета, левого значка, центрирования заголовка, окна поиска, правая кнопка поддерживает значок/текст/изображение, вы также можете установить стиль, подсказку с красной точкой, обработку событий
<NavBar title='Taro标题栏' fixed
headerRight={[
{icon: '\ue614', style: {color: '#e93b3d'}},
{img: require('../../assets/taro.png'), dot: true, onClick: this.handleCallback},
{icon: '\ue600', style: {marginRight: 10}},
]}
/><NavBar isBack leftIcon={'\ue69f'} title='搜索栏' background='#42b983' color='#fcc' search
searchStyle={{
backgroundColor:'rgba(255,255,255,.6)', borderRadius: Taro.pxTransform(50), color: '#333'
}}
headerRight={[
{icon: '\ue622', style: {color: '#6afff9'}},
{icon: '\ue63a'},
]}
/>Пользовательская нижняя вкладка Таро
import Taro from '@tarojs/taro'
import { View, Text } from '@tarojs/components'
import classNames from 'classnames'
import './index.scss'
export default class TabBar extends Taro.Component {
// 默认参数配置
static defaultProps = {
current: 0,
background: '#fff',
color: '#999',
tintColor: '#6190e8',
fixed: false,
onClick: () => {},
tabList: []
}
constructor(props) {
super(props)
this.state = {
updateCurrent: props.current
}
}
...
render() {
const { background, color, tintColor, fixed } = this.props
const { updateCurrent } = this.state
return (
<View className={classNames('taro__tabbar', fixed && 'taro__tabbar--fixed')}>
<View className={classNames('taro__tabbar-list', fixed && 'taro__tabbar-list--fixed')} style={{backgroundColor: background}}>
{this.props.tabList.map((item, index) => (
<View className="taro__tabbar-item taro__tabbar-item--active" key={index} onClick={this.updateTabbar.bind(this, index)}>
<View className="taro__tabbar-icon">
<Text className="iconfont taro__tabbar-iconfont" style={{color: updateCurrent == index ? tintColor : color}}>{item.icon}</Text>
{/* 圆点 */}
{!!item.badge && <Text className="taro__badge taro__tabbar-badge">{item.badge}</Text>}
{!!item.dot && <Text className="taro__badge-dot taro__tabbar-badge--dot"></Text>}
</View>
<Text className="taro__tabbar-title" style={{color: updateCurrent == index ? tintColor : color}}>{item.title}</Text>
</View>
))}
</View>
</View>
);
}
}
Пользовательская панель вкладок также поддерживает настраиваемый фон, цвет, значок, событие выбора параметра щелчка для возврата значения индекса.
<TabBar current={currentTabIndex} background='#f8f8f8' color='#999' tintColor='#6190e8' fixed onClick={this.handleTabbar}
tabList={[
{icon: '\ue627', title: '首页', badge: 8},
{icon: '\ue61e', title: '商品'},
{icon: '\ue605', title: '个人中心', dot: true},
]}
/>
Что ж, я представлю его здесь сегодня.В будущем я рассмотрю возможность использования технологии Таро для разработки многотерминального реального боевого проекта.