React Native Knowledge 6-NavigatorIOS components, reactnative Components

React Native Knowledge 6-NavigatorIOS components, reactnative Components

NavigatorIOS encapsulates the navigation function of UIKit. You can use the left stroke function to return to the previous interface. This component is not maintained by the official Facebook development team. The development of this component is completely led by the community. If the pure js solution can meet your needs, we suggest you select the Navigator component (for theoretical knowledge, see React Native Chinese Web ).

I. Concept content

1: routing: A route is an object used to describe a page in the navigator. The first route of NavigatorIOS is provided through the initialRoute attribute.

render: function() {  return (    <NavigatorIOS      initialRoute={{        component: MyView,        title: 'My View Title',        passProps: { myProp: 'foo' },      }}    />  );},

Now MyView is rendered by the navigator. It can obtain the corresponding routing object, the navigator itself, and all attributes passed in passProps through the route attribute. View the propTypes of initialRoute to understand the complete definition of the route.

2: Navigator: the navigator is an object that contains a series of navigation functions for the view to call. It is passed as a props to any component rendered by NavigatorIOS.

var MyView = React.createClass({  _handleBackButtonPress: function() {    this.props.navigator.pop();  },  _handleNextButtonPress: function() {    this.props.navigator.push(nextRoute);  },  ...});

A navigator object contains the following functions:

Push (route)-the navigator jumps to a new route. Pop ()-return to the previous page. PopN (n)-return to N pages. When N = 1, the effect is the same as that of pop. Replace (route)-replace the route on the current page and load the new route view immediately. ReplacePrevious (route)-replace the route/view of the previous page. ReplacePreviousAndPop (route)-replace the route/view of the previous page and immediately switch back to the previous page. ResetTo (route)-replace the top-level route and return to it. PopToRoute (route)-always returns to a specified route. PopToTop ()-Return to the top-layer route.

Navigation functions can also be obtained from the child components of NavigatorIOS:

var MyView = React.createClass({  _handleNavigationRequest: function() {    this.refs.nav.push(otherRoute);  },  render: () => (    <NavigatorIOS      ref="nav"      initialRoute={...}    />  ),});

Ii. Attributes

1: barTintColor string

The background color of the navigation bar.

2: initialRoute {component: function, title: string, passProps: object, backButtonIcon: Image. propTypes. source, backButtonTitle: string, leftButtonIcon: Image. propTypes. source, leftButtonTitle: string, onLeftButtonPress: function, rightButtonIcon: Image. propTypes. source, rightButtonTitle: string, onRightButtonPress: function, wrapperStyle: [object Object]}

NavigatorIOS uses a "Route" object to include the child views to be rendered, their attributes, and navigation bar configuration. The parameters of "push" and any other navigation functions are such routing objects.

3: itemWrapperStyle View # style

Default properties of components in the navigator. A common purpose is to set the background color of all pages.

4: navigationBarHidden bool

A boolean value that determines whether the navigation bar is hidden.

5: shadowHidden bool

A boolean value determines whether to hide the shadow of 1 pixel.

6: tintColor string

The color of the buttons in the navigation bar.

7: titleTextColor string

The text color of the navigator title.

8: translucent bool

A boolean value determines whether the navigation bar is translucent.

9: interactivepopgstureenabled bool

Determines whether to enable the slide return gesture. If this attribute is not specified, the gesture determines whether to enable the navigationBar based on its explicit and hidden state (enable gesture when displaying and disable gesture when hiding ). After this attribute is specified, the gesture has nothing to do with the explicit or hidden state of navigationBar.

Iii. Method

1: push (route: {component: Function; title: string; passProps? : Object; backButtonTitle? : String; backButtonIcon? : Object; leftButtonTitle? : String; leftButtonIcon? : Object; onLeftButtonPress? : Function; rightButtonTitle? : String; rightButtonIcon? : Object; onRightButtonPress? : Function; wrapperStyle? : Any;}) Jump

2: popN (n: number) returns layer N

3: pop () returns the previous Layer

4: replaceAtIndex (route: {component: Function; title: string; passProps? : Object; backButtonTitle? : String; backButtonIcon? : Object; leftButtonTitle? : String; leftButtonIcon? : Object; onLeftButtonPress? : Function; rightButtonTitle? : String; rightButtonIcon? : Object; onRightButtonPress? : Function; wrapperStyle? : Any;}, index: number) to replace the route of the navigation stack. The index specifies the route in the stack to replace. If it is negative, it is counted from the back.

5: replace (route: {component: Function; title: string; passProps? : Object; backButtonTitle? : String; backButtonIcon? : Object; leftButtonTitle? : String; leftButtonIcon? : Object; onLeftButtonPress? : Function; rightButtonTitle? : String; rightButtonIcon? : Object; onRightButtonPress? : Function; wrapperStyle? : Any ;})

Replace the current page route and load the new routing view immediately.

6: replacePrevious (route: {component: Function; title: string; passProps? : Object; backButtonTitle? : String; backButtonIcon? : Object; leftButtonTitle? : String; leftButtonIcon? : Object; onLeftButtonPress? : Function; rightButtonTitle? : String; rightButtonIcon? : Object; onRightButtonPress? : Function; wrapperStyle? : Any ;})

Replace the route/view of the previous page.

7: popToTop () returns to the top layer

8: popToRoute (route: {component: Function; title: string; passProps? : Object; backButtonTitle? : String; backButtonIcon? : Object; leftButtonTitle? : String; leftButtonIcon? : Object; onLeftButtonPress? : Function; rightButtonTitle? : String; rightButtonIcon? : Object; onRightButtonPress? : Function; wrapperStyle? : Any ;})

Returns the project of the specified route object.

9: replacePreviousAndPop (route: {component: Function; title: string; passProps? : Object; backButtonTitle? : String; backButtonIcon? : Object; leftButtonTitle? : String; leftButtonIcon? : Object; onLeftButtonPress? : Function; rightButtonTitle? : String; rightButtonIcon? : Object; onRightButtonPress? : Function; wrapperStyle? : Any ;})

Replace the preceding routing/view and return to it.

10: resetTo (route: {component: Function; title: string; passProps? : Object; backButtonTitle? : String; backButtonIcon? : Object; leftButtonTitle? : String; leftButtonIcon? : Object; onLeftButtonPress? : Function; rightButtonTitle? : String; rightButtonIcon? : Object; onRightButtonPress? : Function; wrapperStyle? : Any ;})

Replace top-level and execute poptotop

Iii. instance code

Import React, {Component} from 'react '; import {AppRegistry, StyleSheet, Text, View, TextInput, Alert, Image, TouchableHighlight, TouchableOpacity, NavigatorIOS, scrollView} from 'react-native '; // class ReactNativeProject extends Component {render () {return (<NavigatorIOS style ={{ flex: 1 }} initialRoute ={{ component: listPage, title: 'homepage' }}/>) ;}// class ListPage extends Component {render () {return (<ScrollView style = {styles. flex }> <Text style = {styles. list_item} onPress = {this. _ goToDetailPage. bind (this)}> Order 1 Details </Text> <Text style = {styles. list_item} onPress = {this. _ goToDetailPage. bind (this)}> order 2 details </Text> <Text style = {styles. list_item} onPress = {this. _ goToDetailPage. bind (this)}> order 3 details </Text> </ScrollView>);} _ goToDetailPage () {this. props. navigator. push ({component: DetailPage, title: 'order details', rightButtonTitle: 'cart', onRightButtonPress: function () {alert ('go to my cart') ;}}}// details page class DetailPage extends Component {_ show (text) {alert (text );} _ handleBackButtonPress () {this. props. navigator. pop ();} render () {return (<View style = {styles. container }> <TouchableOpacity onPress = {this. _ show. bind (this, 'react Native ')} activeOpacity = {0.5}> <Text style = {styles. item}> React Native </Text> </TouchableOpacity> <TouchableOpacity onPress = {this. _ handleBackButtonPress. bind (this) }> <Text style = {styles. item }> return to the upper-level page </Text> </TouchableOpacity> </View>);} const styles = StyleSheet. create ({container: {flex: 1, marginTop: 64}, item: {fontSize: 18, marginLeft: 5, color: '#434343'}, flex: {flex: 1 ,}, list_item: {lineHeight: 25, fontSize: 16, marginLeft: 10, marginRight: 10 }}); AppRegistry. registerComponent ('reactnativeproject', () => ReactNativeProject );

: