[React Native Development] ToolbarAndroid Toolbar Control of React Native control (15)

[React Native Development] ToolbarAndroid Toolbar Control of React Native control (15)
(1) Preface

Today, let's take a look at the complete parsing and best practices of ToolBarAndroid, a tool bar control.

The newly created React Native technology exchange group (282693535). You are welcome to join us! At the same time, on the left side of the blog, you are welcome to scan the subscription number, mobile technology, and technology push!

This ToolBarAndroid component encapsulates the ToolBar component on the Android platform (applicable only to the Android platform ). A ToolBar component can display a Logo icon and some navigation images (such as menu function buttons), a title and subtitle, and a list of functions. The title and Subtitle are the upper and lower positions. The logo icon and navigation icon are displayed on the left, the title and Subtitle are displayed in the middle, and the function list is displayed on the right.

[Note] If the Toolbar has only one subnode, it is displayed in the middle of the title and function list.

Note: although the Logo icon, navigation icon, and function list icon of Toolbar support loading remote images (network images, etc ). However, this method is only supported in Dev (Development Mode) mode. However, in the Release mode, you should only use resources in the application for rendering. For example, the request ('./some_icon.png') will automatically load resources for me. Therefore, as long as we do not directly use {uri: 'http: //... '} during development, there is no problem.

(2) official instance code

Here, let's take a look at a simple example of a ToolBar officially provided:

render: function() {  return (    
 
    )},onActionSelected:function(position) {  if (position === 0) { // index of 'Settings'    showSettings();  }}
 

This Code adds a ToolBarAndroid component, including the Logo icon, title information, and function list information. When a function is clicked, it responds to relevant methods. The following describes how to use an instance.

(3) attribute method (general and Android platforms only)

3.1.View-related property styles are inherited (for example, width and height, background color, margins, and other related property styles)

3.2.actions set function list information the parameter information passed in by the attribute is: [{title: string, icon: optionalImageSource, show: enum ('alway', 'ifroom ', 'Never '), showWithText: bool. This will be displayed on the right side of the component (the display mode is Icon or text). If the area on the interface is no longer available, it will be added to the hidden menu (displayed in the pop-up ). The value of this attribute is an array of objects. Each object includes the following parameters:

• Title: required. title of this function
• Icon: The function icon uses this code to obtain require ('./some_icon.png ')
• Show: This setting icon is displayed directly, hidden or displayed in the pop-up menu. Always indicates always display, ifRoom indicates that if the Bar control is sufficient, or never indicates that the display is not directly used.
• ShowWithText boolean to set whether to display the title information next to the icon

  3.3.contentInSetEnd number is used to set the spacing between the right side of the ToolBar and the right edge of the screen.

  3.4.contentInsetStart number is used to set the spacing between the left and right edges of the ToolBar.

  3.5.logo optionalImageSource optional image resource used to set the Logo icon of the Toolbar

  3.6.navIcon optionalImageSource: Optional image resources used to set navigation icons

  3.7.onActionSelectedfunction: callback method when our function is selected. This method will pass in only one parameter: Click function index information in the function list

  3.8.onIconClickedfunction callback method when the icon is selected

  3.9.overflowIcon optionalImageSource

  3.10. The functional sequence in the rtl setting toolbar is from Right To Left (RTL: Right To Left ). To make this effect take effect, you must use AndroidMainifest In the Android app. add android: supportsRtl = "true" to the application node in xml, and then call the following code in the onCreate method of your main Activity (for example, MainActivity): setLayoutDirection (LayoutDirection ction. RTL ).

  3.11.subtitle string set the subtitle of the toolbar

  3.12.subtitleColor color set the subtitle color of the toolbar

  3.13.title string set the toolbar title

  3.14.titleColor color set the title color of the toolbar

  (4) ToolbarAndroid instance description

  . The instance simply displays the title/sub-title of the Toolbar and the function list and navigation icon. The instance code is as follows:

   

  'Use strict '; import React, {AppRegistry, Component, StyleSheet, Text, View,} from 'react-native'; var ToolbarAndroid = require ('toolbarandroid '); class ToolBarAndroidDemo extends Component {render () {return (
     ) ;}} Var toolbarActions = [{title: 'create', icon: require ('. /ic_create_black_48dp.png '), show: 'alway'}, {title: 'filter'}, {title: 'settings', icon: require ('. /ic_settings_black_48dp.png '), show: 'always'},]; const styles = StyleSheet. create ({toolbar: {backgroundColor: '# e9eaed', height: 56,},}); AppRegistry. registerComponent ('toolbarandroiddemo', () => ToolBarAndroidDemo );

   

  The running effect is as follows:

  . Set only the title and function list without navigation icons. The Code is as follows:

  'Use strict '; import React, {AppRegistry, Component, StyleSheet, View,} from 'react-native'; var ToolbarAndroid = require ('toolbarandroid '); class ToolBarAndroidDemo extends Component {render () {return (
     ) ;}} Var toolbarActions = [{title: 'create', icon: require ('. /ic_create_black_48dp.png '), show: 'alway'}, {title: 'filter'}, {title: 'settings', icon: require ('. /ic_settings_black_48dp.png '), show: 'always'},]; const styles = StyleSheet. create ({toolbar: {backgroundColor: '# e9eaed', height: 56,},}); AppRegistry. registerComponent ('toolbarandroiddemo', () => ToolBarAndroidDemo );

   

  The running effect is as follows:

  . Only the navigation icon exists, and the Logo icon and function list instance code is as follows:

   

  'use strict';import React, {  AppRegistry,  Component,  StyleSheet,  View,} from'react-native';var ToolbarAndroid =require('ToolbarAndroid');class ToolBarAndroidDemo extends Component {  render() {    return (       
             
         );  }}var toolbarActions =[  {title: 'Create', icon:require('./ic_create_black_48dp.png'), show: 'always'},  {title: 'Filter'},  {title: 'Settings', icon:require('./ic_settings_black_48dp.png'), show: 'always'},];const styles =StyleSheet.create({  toolbar: {    backgroundColor: '#e9eaed',    height: 56,  },});AppRegistry.registerComponent('ToolBarAndroidDemo',() => ToolBarAndroidDemo);

   

  The running effect is as follows:

  4. The last point is that the ToolbarAndroid component also supports component nesting. Let's look at an example of ToolbarAndroid nested SwitchAndroid component. The function code is as follows:

  'use strict';import React, {  AppRegistry,  Component,  StyleSheet,  View,} from'react-native';var ToolbarAndroid =require('ToolbarAndroid');var SwitchAndroid =require('SwitchAndroid');class ToolBarAndroidDemo extends Component {  render() {    return (       
                 
              
      
         );  }}var toolbarActions =[  {title: 'Create', icon:require('./ic_create_black_48dp.png'), show: 'always'},  {title: 'Filter'},  {title: 'Settings', icon:require('./ic_settings_black_48dp.png'), show: 'always'},];const styles =StyleSheet.create({  toolbar: {    backgroundColor: '#e9eaed',    height: 56,  },});AppRegistry.registerComponent('ToolBarAndroidDemo',() => ToolBarAndroidDemo);

   

  The running effect is as follows: