React Native Navigation 5e

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';

// set the global style 
the setStyle ( { 
  hideBackTitle : to true , 
  hideNavigationBarShadow : to true , 
  navigationBarColor : '#FFFFFF' , 
  navigationBarItemColor : 'FF84A9' , 
  tabBarColor : '#FFFFFF' , 
  tabBarItemColor : '## FF84A9' , 
  backIcon : Image . ResolveAssetSource ( closeIcon ) , 
} )

beforeRegister()

// Register the component, then set the root page

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')),
        },
      ],
    },
  },
});

navigation

Currently supports push, pop, popToRoot, present, dismiss

push parameter

props.navigator.push('NativeViewController', { title: 'Native' })

push receive return value

const resp = await props.navigator.push('Detail')

pop pre-set value

props.navigator.setResult({qwe: 123})
props.navigator.pop()

Global style

Currently there are the following global styles, more will be added in the future

interface GlobalStyle {
  backIcon?: {uri: string} // 设置返回图标
  hideNavigationBarShadow?: boolean // 隐藏导航栏底部线
  hideBackTitle?: boolean // 是否隐藏返回按钮旁边的文字
  navigationBarColor?: string // 导航栏背景颜色
  navigationBarItemColor?: string // 导航栏item颜色

  tabBarColor?: string // tabbar背景颜色
  tabBarItemColor?: string // tabbar选中颜色
}

use

setStyle({
  hideBackTitle: true,
  hideNavigationBarShadow: true,
  navigationBarColor: '#FFFFFF',
  navigationBarItemColor: 'FF84A9',
  tabBarColor: '#FFFFFF',
  tabBarItemColor: '#FF84A9',
  backIcon: Image.resolveAssetSource(CloseIcon),
})

The color only supports hexadecimal, and does not support strings such as red

Path navigation - Support DeepLink

Add a path to the page when registering

registerComponent('Home', Home, '/home')
registerComponent('Setting', Setting)

Activate on the homepage before use

  useEffect(() => {
    router.activate('hulaqinzi://')
    return () => {
      router.inactivate()
    }
  }, [])
Router.open('hulaqinzi://home?key=value')

Will parse out the path /home, and the parameter {key: value}, and push out the Home page and upload

hooks

useResult is used for page return parameters

useReClick responds to repeated clicks on the tabbar event, only used for the home page of each tab

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

Download Details:

Author: Project5E

Source Code: https://github.com/Project5E/react-native-navigation-5e

#react-native #react #mobile-apps