The official recommendation of React-Navigation details

Looking at the navigator contrast to the official document, it is found that the protocol now is a separate navigation react-navigation, which is said to be very simple. I wrote a Demo and tried it.

According to the form of use, three parts:

  1. Stacknavigator: Similar to ordinary Navigator, navigation Bar
  2. Tabnavigator: It is equivalent to TabBarcontroller inside iOS, the tabs under the screen
  3. Drawernavigator: drawer effect, side slide out

Second, Using

 React-native init companyTdeMo   
2 Install this library in the application

Installation is found to be Beta Version (v1.0.0-beta.7), there is a pit?! After a while, we will tell this pit ~

3. Test Tabnavigator, Stacknavigator and Drawernavigator

(1) New homepage.js

 Import React from 'React'; Import {Stylesheet, View, Text, Button, Image} from 'React-Native'; importt {StackNavigator, TabNavigator} from 'react-navigation'; import ChatScreen from './ChatScreen';import MinePage from' ./MinePage';class HomePage extends React.Component {static navigationOptions = {title: 'Home', // Set the title content Header: {backtitle: '', // Return button title content (default as the last title content)}} constructor (prOPs) {super (props);} render () {const {navigate} = this. Props.navigation; return (  Hello, Navigation!   Navigate ('chat', {user: 'sybil'})} title = "Click Jump" /> 

Import React from ‘React’ Import {Button, Image, view, text} from ‘React-native’; class chatscreen extension = {static navigationOptions = {title: ‘chat’,}; render () {const {params} = this.props. navigation.state; return (
Chat with {params.user}
 );}} export default ChatScreen;      (3 New MinePage.JS 
Import React, {Component} from ‘React’; import {Button, Image, View, Text, StyleSheet} from ‘react-native’; import {DrawerNavigator} from ‘react-navigation’; import MyNotificationsScreen from ‘./MyNotificationsScreen’;class MinePage extends Component {static navigationOptions = {title:’ I ‘, Drawerlabel:’ My ‘, // Note: by Default The icon is Only Shown On iOS. Search The showicon option Below. DrawERICON: ({TintColor}) => (

),}; render () {; return (

 this.props.navigation.navigate ('Draweropen')} title = "Click Open Sliding Menu" /> );}}} const styles = Stylesheet.create ({icon: {Width: 24, Height: 24,},}; const mychatnavigator = DRAWERNAVIGATOR ({MyChat: {Screen: minepage,}, notifications: {screen: MyNotificationsScreen,},}, {drawerWidth: 220, // Drawer width drawerPosition: 'left', // // contentComponent drawer right or left: CustomDrawerContentComponent, // custom drawer assembly contentOptions: {initialRouteName: MinePage, // default page components activeTintColor: '# 008AC9', // select the text color activeBackgroundColor: '# f5f5f5', // select the background color inactiveTintColor: '# 000', // unselected text color inactiveBackgroundColor: '#fff' , // Unchecked background color style: {// style}}}; export default mychatnavigator;     
import React from ‘react’; import {StyleSheet, View, Text, Button, Image} from ‘react-native’; class MyNotificationsScreen extends React.Component {static navigationOptions = {title: ‘notify ‘, DRAWerlabel: ‘Notification’, Drawericon: ({TINTCOLOR}) => (

),}; render () {return (

this.props.navigation.navigate (‘DRAWEROPEN’)} title = “Click to open the side slip menu” /> this.props.navigation.goback ()} Title = “Return to my interface” />
);}} const styles = stylesheet.create ({Tabicon: { Width: 24, Height: 24,},}); Export Default mynotificationsScreen;   (5) Run  
What is the reason? It turned out to be the beta BUG, ​​found the 12th line of Node_Modules / React-Navigation / src / views / taker.js in the catalog, delete it OK ~
PS: Unfortunately, this error I didn’t Time to stay ~ When I am about to publish this article, the latest version has changed (v1.0.0-beta.9), the latest version has modified the above BUG!

Ok, run again ~

Previous dynamic rendering:

want to detail Learn more React NaVIGATION, you can read this gentle document, I hope to help you ~

The above is all the content of this article, I hope to help everyone, I hope everyone will support Tumi. cloud.

© Copyright Notice
Just support it if you like
comment Grab the couch

Please log in to comment