react-native-pure-navigation-bar

中文说明

Here is a fully customizable navigation bar in React-Native. You can set the global unified style of navigation bar and add it as a react component in each page.

It supports:

• Absolute position style.
• Safe Area Inset style.
• Portrait and Landscape mode.
• Translucent property for Android.
• Do go back action automatically.
• Title center or uncenter.
• Seperator under navigation bar.
• Button type of string, number or react element.
• Go back button with image or text.
• Customize style globally and in each view.

ScreenShots

iPhone X

Android

Install

Install by Yarn:

yarn add react-native-pure-navigation-bar

Install by NPM:

npm install --save react-native-pure-navigation-bar

Usage

First import in the file:

import NaviBar from 'react-native-pure-navigation-bar';

Then add component in render() function:

render() {
  return (
    <View style={{flex: 1}}>
      <NaviBar
        title='CustomTitle'
        {/* other properties if you want to specify it */}
      />
      {/* other components */}
    </View>
  );
}

Export

Global Settings

You can change the navigation bar settings at the startup, include navigation bar style, and other default props.

You can set options like this:

import {InnerNaviBar} from 'react-native-pure-navigation-bar';

InnerNaviBar.defaultProps.isTranslucent = true;
InnerNaviBar.defaultProps.style.titleContainer = {...};

Custom Setting

You can control the action or style of navigation bar by passing 'props'.

You can see index.d.ts for their types and src/index.js for their default values.

Style

The component style is consist of three part:

• User custom style, passed by component props, is highest level.
• Global setting style, set with defaultProps in InnerNaviBar, is medium level, can be override by User custom style.
• Inner style, written in src/style.js, is lowest level, can be overrided by the two styles above.

All the key you can customize in Global or Custom settings list below:

FAQ

You can see Wiki for questions. And if not found, you can commit a issue to me.

Example Project

You can open the example project by following steps:

1. Enter example. Use yarn or npm install to install the modules. Run npm start in a seperate terminal.
2. Create a example project with entry file index and module name test.