# react-native-navigation-5e

> native-navigation

Latest version **0.0.3** (published 2020-10-10) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-native-navigation-5e
pnpm add react-native-navigation-5e
yarn add react-native-navigation-5e
bun add react-native-navigation-5e
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.3 |
| Published | 2020-10-10 |
| First published | 2020-09-27 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 185.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 4 |
| Author | 5e |
| Maintainers | 5e |
| Keywords | react-native, ios, android |

## Links

- npm: https://www.npmjs.com/package/react-native-navigation-5e
- Repository: https://github.com/Project5E/react-native-navigation-5e
- Homepage: https://github.com/Project5E/react-native-navigation-5e#readme
- Issues: https://github.com/Project5E/react-native-navigation-5e/issues
- npm.io page: https://npm.io/package/react-native-navigation-5e

## Alternatives

- [@sindresorhus/slugify](https://npm.io/package/@sindresorhus/slugify.md) — 3.7M weekly downloads
- [solid-js](https://npm.io/package/solid-js.md) — 2.7M weekly downloads
- [expo-glass-effect](https://npm.io/package/expo-glass-effect.md) — 2.5M weekly downloads
- [nanoassert](https://npm.io/package/nanoassert.md) — 780.8K weekly downloads
- [@ffmpeg/ffmpeg](https://npm.io/package/@ffmpeg/ffmpeg.md) — 529.5K weekly downloads

## Recent versions

- 0.0.3 (latest) — 2020-10-10
- 0.0.2 — 2020-09-27
- 0.0.1 — 2020-09-27

## README

# react-native-navigation-5e

native-navigation

## Installation

```sh
yarn add react-native-navigation-5e

# npm install react-native-navigation-5e
```

## Usage

```js
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](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.

## License

MIT

---
_Source: https://npm.io/package/react-native-navigation-5e · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._