0.0.3 • Published 4 years ago
react-native-navigation-5e v0.0.3
react-native-navigation-5e
native-navigation
Installation
yarn add react-native-navigation-5e
# npm install react-native-navigation-5e
Usage
import { registerComponent, setRoot } from 'react-native-navigation-5e';
// 设置全局样式
setStyle({
hideBackTitle: true,
hideNavigationBarShadow: true,
navigationBarColor: '#FFFFFF',
navigationBarItemColor: 'FF84A9',
tabBarColor: '#FFFFFF',
tabBarItemColor: '#FF84A9',
backIcon: Image.resolveAssetSource(CloseIcon),
})
beforeRegister()
// 注册组件,然后设置根页面
registerComponent('Home', Home);
registerComponent('Setting', Setting);
registerComponent('Detail', Detail);
registerComponent('Present', Present);
registerComponent('NoNavigationBar', NoNavigationBar);
setRoot({
root: {
tabs: {
children: [
{
component: 'Home',
title: '主页',
icon: Image.resolveAssetSource(require('./src/image/Home.png')),
},
{
component: 'Setting',
title: '设置',
icon: Image.resolveAssetSource(require('./src/image/Profile.png')),
},
],
},
},
});
导航
目前支持push,pop,popToRoot,present,dismiss
push传参
props.navigator.push('NativeViewController', { title: 'Native' })
push接收返回传值
const resp = await props.navigator.push('Detail')
pop前设值
props.navigator.setResult({qwe: 123})
props.navigator.pop()
全局样式
目前有以下全局样式,后续会增加更多
interface GlobalStyle {
backIcon?: {uri: string} // 设置返回图标
hideNavigationBarShadow?: boolean // 隐藏导航栏底部线
hideBackTitle?: boolean // 是否隐藏返回按钮旁边的文字
navigationBarColor?: string // 导航栏背景颜色
navigationBarItemColor?: string // 导航栏item颜色
tabBarColor?: string // tabbar背景颜色
tabBarItemColor?: string // tabbar选中颜色
}
使用
setStyle({
hideBackTitle: true,
hideNavigationBarShadow: true,
navigationBarColor: '#FFFFFF',
navigationBarItemColor: 'FF84A9',
tabBarColor: '#FFFFFF',
tabBarItemColor: '#FF84A9',
backIcon: Image.resolveAssetSource(CloseIcon),
})
颜色只支持16进制,不支持red等字符串
路径导航 -- 支持DeepLink
注册的时候为页面加入路径
registerComponent('Home', Home, '/home')
registerComponent('Setting', Setting)
使用前在首页激活
useEffect(() => {
router.activate('hulaqinzi://')
return () => {
router.inactivate()
}
}, [])
Router.open('hulaqinzi://home?key=value')
会解析出路径/home,以及参数 {key: value},并push出Home页面和传惨
hooks
useResult 用于页面返回传参
useReClick 响应重复点击tabbar事件,仅用于每一个tab的首页
Contributing
See the contributing guide to learn how to contribute to the repository and the development workflow.
License
MIT