The specific content can be roughly divided into the following:

(1) React-Navigation library properties introduction

(2) StackNavigator and TabNavigator realize interface skipping and Tab switching

(3) Jump, transfer and value transfer between StackNavigator interfaces

(4) DrawerNavigator realizes drawer navigation menu

(5) DrawerNavigator extension function

(6) Modify the source code, customize the UI interface

1. StackNavigator properties

[html]
view plain
copy
print
?

1. NavigationOptions: Configures some properties of StackNavigator.
2.   
3. Title: title. If this is set, the title of the navigation bar and TAB bar will be the same. It is not recommended
4. Header: You can set some navigation properties. If you want to hide the top navigation bar, set this property to NULL
5. HeaderTitle: Set the navigation title. Recommended
6. HeaderBackTitle: Sets the text after the return arrow on the left of the page to jump to. The default is the title of the previous page. The value can be custom or null
7. HeaderTruncatedBackTitle: Default to “back” if the previous page title does not match the text after the back arrow
8. HeaderRight: Sets the right side of the navigation bar. This can be a button or other view control
9. HeaderLeft: Sets the left side of the navigation bar. This can be a button or other view control
10. HeaderStyle: Sets the style of the navigation bar. Background color, width and height
11. HeaderTitleStyle: Sets the navigation text style
12. HeaderBackTitleStyle: Sets the navigation bar ‘back’ text style
13. HeaderTintColor: Sets the navigation bar color
14. HeaderPressColorAndroid: Android unique Settings color texture, android version greater than 5.0
15. GesturesEnabled: Indicates whether the swipe back gesture is supported. By default, it is supported on iOS and disabled on Android
16.    
17.   
18. Screen: indicates the interface name. You need to fill in the page after import
19.   
20. Mode: defines the jump style
21.   
22. Card: Use the default style of iOS and Android
23.   
24. Modal: iOS specifically draws the screen from the bottom. Ios-like present effect
25.   
26. HeaderMode: Animation effect when returning to the previous page
27.   
28. Float: iOS default effect
29.   
30. Screen: The entire page is returned during the slide
31.   
32. None: No animation
33.   
34. CardStyle: Customizes jump effects
35.   
36. TransitionConfig: Custom Settings slide-back configuration
37.   
38. OnTransitionStart: function called when the transition animation is about to start
39.   
40. OnTransitionEnd: The function that will be called when the transition animation is complete
41.   
42. Path: indicates the override mapping configuration of the path specified in the route
43.   
44. InitialRouteName: Sets the default page component, which must be registered above
45.   
46. InitialRouteParams: indicates the initial route parameter

NavigationOptions: Configures some properties of StackNavigator. Title: The title of the navigation bar will be the same as the title of the TAB bar if this is set. It is not recommended to use header: Some navigation properties can be set. To hide the top navigation bar, just set this property to null headerTitle: Set the title of the navigation bar. HeaderBackTitle is recommended: Set the text after the return arrow on the left of the page. The default title is the previous page. This parameter can be customized or set to NULL headerTruncatedBackTitle: If the previous page title does not match the text after the return arrow, the default value is "Back" headerRight: Set the right side of the navigation bar. Can be a button or other view control. HeaderLeft: Sets the left side of the navigation bar. This can be a button or other view control headerStyle: Sets the style of the navigation bar. Background color, wide high headerTitleStyle: Set navigation bar text style headerBackTitleStyle: Set navigation bar 'back' text style headerTintColor: Set navigation bar color headerPressColorAndroid: GesturesEnabled: Whether the swipe back gesture is supported, which is supported by iOS by default, and disabled by Android by default screen: corresponds to the interface name, you need to fill in the page after import mode: defines the jump style card: Use iOS and Android's default modal style: iOS only draws the screen from the bottom. Present effect similar to iOS headerMode: animation effect when returning to the previous page Float: default effect of iOS Screen: None: no animation is returned throughout the page during scrolling cardStyle: OnTransitionStart: the function that will be called when the transition animation is about to begin onTransitionEnd: the function that will be called when the transition animation is complete path: InitialRouteName: Sets the default page component, which must be the page component registered above initialRouteParams: initial route parameterCopy the code

Note: Path may be confusing to you. The path property applies to other apps or browsers that use the URL to open the app and enter the specified page. The path attribute is used to declare an interface path, for example, [/pages/Home]. At this point, we can enter: APP name ://pages/Home in the mobile browser to start the app and enter the Home interface.

2. TabNavigator properties introduction

[html]
view plain
copy
print
?

1. Screen: Provides the same function as navigation. You can use this screen to transfer values or jump to other pages corresponding to the interface name.
2.   
3.   
4. NavigationOptions: Configures some properties of the TabNavigator
5.   
6. Title: Specifies the title of the navigation bar and TAB bar
7.   
8. TabBarVisible: Indicates whether to hide the label bar. Default not to hide (true)
9.   
10. TabBarIcon: Icon for setting the TAB bar. You need to set it for each of them
11.   
12. TabBarLabel: Sets the title of the label bar. recommended
13.   
14. Navigation Bar Configuration
15.   
16. TabBarPosition: Sets the tabbar position, which is at the bottom for iOS and at the top for Android. (Attribute values: ‘top’, ‘bottom’)
17.   
18. SwipeEnabled: Whether to allow sliding between labels
19.   
20. AnimationEnabled: Whether to display animation when changing labels
21.   
22. Lazy: Whether to render tabs lazily as needed, rather than ahead, meaning that the bottom TAB bar is loaded when the app is opened. Default is false, and true is recommended
23.   
24. TrueinitialRouteName: Sets the default page component
25.   
26. BackBehavior: Indicates whether to press the back key to switch to the first Tab(home page)
27.   
28. TabBarOptions: Configures some properties of the TAB bar iOS properties
29.   
30. ActiveTintColor: Labels and ICONS are active in the foreground
31.   
32. ActiveBackgroundColor: activeBackgroundColor of label and icon
33.   
34. InactiveTintColor: Label and icon in inactive foreground color state
35.   
36. InactiveBackgroundColor: The background color of label and icon is inactive
37.   
38. ShowLabel: indicates whether to display label. Style: tabbar is enabled by default
39.   
40. LabelStyle: The style android attribute of the label
41.   
42. ActiveTintColor: Labels and ICONS are active in the foreground
43.   
44. InactiveTintColor: Label and icon in inactive foreground color state
45.   
46. ShowIcon: Indicates whether to display ICONS. The value is disabled by default
47.   
48. ShowLabel: indicates whether to display label. Style: tabbar is enabled by default
49.   
50. LabelStyle: indicates the label style. UpperCaseLabel: indicates whether to uppercase the label. The default value is true
51.   
52. PressColor: Material Ripple effect color (Android version needs to be greater than 5.0)
53.   
54. PressOpacity: Press TAB transparency changes (Android version requires less than 5.0)
55.   
56. ScrollEnabled: indicates whether to enable the scrollable TAB tabStyle: indicates the style of TAB
57.   
58. IndicatorStyle: The style object for the label indicator (the line at the bottom of the TAB). Android has an extra line at the bottom, so you can fix this by setting height to 0
59.   
60. LabelStyle: The style of the label
61.   
62. IconStyle: iconStyle

Screen: Provides the same function as navigation. You can use this screen to transfer values or jump to other pages corresponding to the interface name. NavigationOptions: set some properties of the TabNavigator. Title: set the title of the navigation bar and the tabBarVisible: whether to hide the TAB bar. Default unhidden (true) tabBarIcon: Sets the icon of the TAB bar. You need to set tabBarLabel for each: Set the title of the label bar. TabBarPosition: Set the tabbar position, which is at the bottom by default on iOS and at the top by default on Android. (Property values: 'top', 'bottom') swipeEnabled: Whether to allow sliding between labels animationEnabled: Whether to display animation when changing labels Lazy: Whether to render tabs lazily as needed, rather than early, meaning to load the bottom TAB bar when the app opens. Default is false, and true is recommended. TabBarOptions: Configures some properties of the Tab bar. IOS properties activeTintColor: ActiveBackgroundColor: activeBackgroundColor of label and icon InactiveBackgroundColor: Background color of label and icon inactive showLabel: Whether to display label, enabled by default Style: Tabbar style labelStyle: ActiveTintColor: Label and icon inactive state inactiveTintColor: Label and icon in inactive state showIcon: Style: tabbar style labelStyle: Label style upperCaseLabel: Indicates whether to uppercase the label. The default value is true pressColor: Indicates whether to uppercase the label. Material Ripple effect color (Android version > 5.0) pressOpacity: Change the transparency of the TAB when pressed (Android version < 5.0) scrollEnabled: Whether to enable the scrollable TAB tabStyle: IndicatorStyle: The style object for the label indicator (the line at the bottom of the TAB). Android will have an extra line at the bottom, so you can temporarily fix this by setting height to 0Copy the code

3. Introduction of DrawerNavigator properties

[html]
view plain
copy
print
?

1. DrawerNavigatorConfig  
2.   
3. DrawerWidth – The width of the drawer
4. DrawerPosition – Options are left or right. The default position is left
5. ContentComponent – Components used to render the contents of the drawer, such as navigation items. Receive drawer navigation. The default is DrawerItems
6. ContentOptions – Configures drawer contents
7.   
8. InitialRouteName – Indicates the routeName of the initial route
9. Order – routeNames array that defines the order of drawer items.
10. Path – Provides a mapping of routeName to the path configuration, which overrides the path set in routeConfigs.
11. BackBehavior – Does the back button switch to the initial route? If so, set it to initialRoute, otherwise none. The default is the initialRoute behavior
12.   
13. The contentOptions property of DrawerItems
14.   
15. ActiveTintColor – Active label and icon colors
16. ActiveBackgroundColor – The background color of the active label
17. InactiveTintColor – Label and icon colors for inactive labels
18. InactiveBackgroundColor – Background color of an inactive label
19. Style style object for the content section
20. LabelStyle – The style object to override the text style in the content section when your label is a string

Drawerconfig drawerWidth - drawerWidth drawerPosition - options are left or right. The default is left contentComponent - a component that renders the contents of the drawer, such as navigation items. Receive drawer navigation. Default is DrawerItems contentOptions - configure drawer contents initialRouteName - routeName order for the initial route - routeNames array that defines DrawerItems order. Path - Provides a mapping of routeName to the path configuration, which overrides the path set in routeConfigs. BackBehavior - Does the back button switch to the initial route? If so, set it to initialRoute, otherwise none. Default is initialRoute behavior contentOptions property of DrawerItems activeTintColor - Active label label and icon color activeBackgroundColor - Active label background color InactiveTintColor - Label and icon colors for inactive labels inactiveBackgroundColor - Style of content section for inactive labels Style object labelStyle - When your label is a string, The style object to override the text style in the content sectionCopy the code

Given the basic properties of the three components of react navigation, it’s time to roll up our sleeves and see the magic.

4. Use StackNavigator + TabNavigator to switch Tab interface and navigate between interfaces

The API definition: StackNavigator (RouteConfigs StackNavigatorConfig), TabNavigator (RouteConfigs, NPM install React-navigation –save

[html]
view plain
copy
print
?

1. import {StackNavigator,TabNavigator,TabBarBottom} from ‘react-navigation’;  
2. import HomeScreen from ‘./pages/HomePage’;  
3. import MineScreen from ‘./pages/MinePage’;  

import {StackNavigator,TabNavigator,TabBarBottom} from 'react-navigation';
import HomeScreen from './pages/HomePage';
import MineScreen from './pages/MinePage';Copy the code

(3) Define TabNavigator

import {StackNavigator,TabNavigator,DrawerNavigator} from 'react-navigation';
import HomeScreen from './pages/HomePage';
import MineScreen from './pages/MinePage';

export default class Demo extends Component {

  render() {
        return (
          <Navigator />
        );
  }
}

const Navigator = DrawerNavigator({

    Home:{screen:HomeScreen},
    Mine:{screen:MineScreen},
});

const styles = StyleSheet.create({

    container: {
        flex: 1,
    },
});

AppRegistry.registerComponent('Demo', () => Demo);Copy the code

The definition is basically similar to StackNavigator, so I won’t go into details here.





(2) HomeScreen interface and MineScreen interface:

[html]
view plain
copy
print
?

1. export default class HomePage extends Component {  
2.   
3.     static navigationOptions = {  
4. DrawerLabel: ‘home ‘,
5.         drawerIcon:({tintColor}) => (  
6.             <Image  
7.                 source={require(‘./.. /imgs/ic_happy.png’)}
8.                 style={[styles.icon, {tintColor: tintColor}]}/>  
9.         ),  
10.     };  
11.   
12.     render() {  
13.         return(  
14.             <View style={{flex:1}} >  
15.                 <Text onPress={this._skip.bind(this)} >Click the jump</Text>  
16.             </View>  
17.         );  
18.     }  
19.   
20.     _skip() {  
21.         this.props.navigation.navigate(“Mine”);  
22.     }  
23. }  
24.   
25.   
26. export default class MinePage extends Component {  
27.   
28.     static navigationOptions = {  
29. DrawerLabel: ‘I’,
30.          drawerIcon: ({ tintColor }) => (  
31.             <Image  
32.                 source={require(‘./.. /imgs/ic_h.png’)}
33.                 style={[styles.icon, {tintColor: tintColor}]}  
34.             />  
35.         ),  
36.     };  
37.   
38.     render() {  
39.         return(  
40.             <View style={{flex:1}} >  
41.                 <Text onPress={this._skip.bind(this)} >The previous screen is displayed</Text>  
42.             </View>  
43.         );  
44.     }  
45.   
46. / * *
47. * jump
48. * /
49.     _skip() {  
50.         this.props.navigation.goBack();  
51.     }  
52. }  

export default class HomePage extends Component { static navigationOptions = { drawerLabel: 'front page' drawerIcon: {tintColor}) = > (< Image source = {the require ('. /.. /imgs/ic_happy.png')} style={[styles.icon, {tintColor: tintColor}]}/> ), }; Render () {return(<View style={{{flex:1}}> <Text onPress={this._skip.bind(this)}> </Text> </View>); } _skip() { this.props.navigation.navigate("Mine"); }} export default class MinePage extends Component {static navigationOptions = {drawerLabel:' I ', drawerIcon: ({ tintColor }) => ( <Image source={require('./.. /imgs/ic_h.png')} style={[styles.icon, {tintColor: tintColor}]} /> ), }; Render () {return(<View style={{{flex:1}}> <Text onPress={this._skip.bind(this)}> </Text> </View>); } / jump * * * * / _skip () {this. Props. Navigation. GoBack (); }}Copy the code

The code is very simple, to achieve the jump between the interface.






2. Extended functions





(1) Default DrawerView is not scrollable. To implement scrollable views, you must use a custom container with contentComponent, as shown below:

[html]
view plain
copy
print
?

1. {  
2. DrawerWidth: 200,
3. Drawer position: “Right”
4. ContentComponent:props => <ScrollView>  <DrawerItems {… props} /> </ ScrollView >  
5. }  

{drawerWidth: 200, DrawerItems: "props" contentComponent: > <ScrollView> <DrawerItems {... props} /> </ ScrollView> }Copy the code

(2) You can override the default navigation components and use DrawerItems to customize the navigation components:

[html]
view plain
copy
print
?

1. import {DrawerItems} from ‘react-navigation’;  
2.   
3. const CustomDrawerContentComponent = (props) => (  
4.   <View style = {style.container}>  
5.     <DrawerItems {… props} />  
6.   </View>    
7. );  

import {DrawerItems} from 'react-navigation';

const CustomDrawerContentComponent = (props) => (
  <View style = {style.container}>
    <DrawerItems {... props} />
  </View>  
);
Copy the code

(3) Nested drawer navigation


If you have nested DrawerNavigation, the drawer will appear below the parent navigation.

 title: {
    bottom: 0,
    left: TITLE_OFFSET,
    right: TITLE_OFFSET,
    top: 0,
    position: 'absolute',
    alignItems: 'center',
  }Copy the code

(2) Remove the text display of return key:





Node_modules — react-navigation — SRC — views — headerbackbutton.js node_modules — react-navigation — SRC — views — headerbackbutton.js

[html]
view plain
copy
print
?

1. {Platform.OS === ‘ios’ &&  
2.      title &&  
3.      <Text  
4.        onLayout={this._onTextLayout}  
5.        style={[styles.title, { color: tintColor }]}  
6.        numberOfLines= {1}
7.      >  
8.        {backButtonTitle}  
9.      </Text>}  

       {Platform.OS === 'ios' &&
            title &&
            <Text
              onLayout={this._onTextLayout}
              style={[styles.title, { color: tintColor }]}
              numberOfLines={1}
            >
              {backButtonTitle}
            </Text>}Copy the code

Delete the above code.





(3) Set the button click event of the title bar:





NavigationOptions needs to be static when setting the title parameter in the interface component. Bind (this) can’t call a custom function directly through this.xxx.bind(this). It can be solved by:

[html]
view plain
copy
print
?

1. class demo extends Component {  
2.   
3.     static navigationOptions =({navigation})=>({  
4.             right:( <Button  onPress={state.params.clickParams} />)  
5.     })  
6.     _btnClick= = ()> {  
7. Alert (‘ click ‘)
8.     };  
9.     componentWillMount() {  
10.        this.props.navigation.setParams({clickParams:this._btnClick})  
11.     }  
12. }  

class demo extends Component { static navigationOptions =({navigation})=>({ right:( <Button OnPress = {state. Params. ClickParams}}) / >) _btnClick = () = > {alert (' click ')}; componentWillMount() { this.props.navigation.setParams({clickParams:this._btnClick}) } }Copy the code

(4) Dynamically set the title bar display and hide





According to the idea in (3), we can use setParams to dynamically modify the display and hide of the status bar:

[html]
view plain
copy
print
?

1. class demo extends Component {  
2.     static navigationOptions = ({navigation}) =>({  
3.            visible: state.params.headerState ,  
4.     });  
5.   
6.     render(){  
7.         return(  
8.             <Button  
9.             title=“Hide Header”  
10.             onPress= = {()> this.props.navigation.setParams({ headerState : ‘none’ })}  
11.         />)  
12.     }  
13. }  

class demo extends Component {
    static navigationOptions = ({navigation}) =>({
           visible: state.params.headerState ,
    });

    render(){
        return(
            <Button
            title="Hide Header"
            onPress={() => this.props.navigation.setParams({ headerState : 'none' })}
        />)
    }
}Copy the code