https://github.com/ali322/rn-navigation

yet another router for react-native
https://github.com/ali322/rn-navigation

react-native redux

Last synced: 17 days ago
JSON representation

yet another router for react-native

• Host: GitHub
• URL: https://github.com/ali322/rn-navigation
• Owner: ali322
• Created: 2016-11-21T08:24:01.000Z (almost 8 years ago)
• Default Branch: master
• Last Pushed: 2016-12-27T13:15:22.000Z (almost 8 years ago)
• Last Synced: 2024-10-11T09:14:41.217Z (about 1 month ago)
• Topics: react-native, redux
• Language: JavaScript
• Homepage:
• Size: 598 KB
• Stars: 3
• Watchers: 3
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
RN-Navigation [![CircleCI](https://circleci.com/gh/ali322/rn-navigation.svg?style=svg)](https://circleci.com/gh/ali322/rn-navigation) [![npm version](https://badge.fury.io/js/rn-navigation.svg)](https://badge.fury.io/js/rn-navigation)

===

[![NPM](https://nodei.co/npm/rn-navigation.png?downloads=true&downloadRank=true&stars=true)](https://nodei.co/npm/rn-navigation/)

inspired by [react-native-router-flux](https://github.com/aksonov/react-native-router-flux),yet another router for react-native,built on new NavigationExperimental API,easy to migrate with redux and other flux-like framework

Install

===

```javascript

npm install rn-navigation --save

```

then you need link the dependenices

```javascript

react-native link react-native-vector-icons

```

Useage

===

in your entry point (etc: index.ios.js),define your own routes by Scene component,and wrap all of routes with Router component

```javascript

class Index extends React.Component{

    render(){

        const sceneProps = {

            //scene props what you like to pass into scene components

        }

        return (

            

                

                    

                        

                            

                            

                        

                        

                            

                        

                        

                            

                        

                        

                            

                        

                    

                

            

        )

    }

}

```

then create your own redux store

```javascript

import {routerReducer} from "rn-navigation"

const rootReducer = combineReducers({routerReducer})

connect(state=>({

    navigationState:state.navigationState

}))(Index)

```

in scene component you can navigate to next,or go back to prev

```javascript

this.props.navigationActions.pushScene("topic")

this.props.navigationActions.popScene()

```

just simple and easy,more instructions refer to [API](./API.md),or [中文文档](./API_zh.md)

## Todo

- fix some unknow bugs

- add more api documents

## License

[MIT License](http://en.wikipedia.org/wiki/MIT_License)