react native 中ToolbarAndroid组件示例与说明

/**
 * 组件ToolbarAndroid（Toolbar可以显示一个徽标，一个导航图标（譬如汉堡形状的菜单按钮），一个标
 题与副标题，以及一个功能列表。标题和副标题会在中间显示，徽标和导航图标会在左侧显示，而功能列表则在右侧显示。。）
 * */

import  React,{PureComponent} from 'react'
import  {View,ToolbarAndroid,StyleSheet,Switch,Text} from 'react-native'
class ToolbarObj extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      value1: false,
      actionText:'我是标题'
    };
  }
  changValue=()=>{
    this.setState({value1:!this.state.value1})
  };
  onActionSelected=(position)=> {
    if(position===1){
      alert('我是左边第一个图标')
    }else if(position===2){
      alert('我是功能1')
    }else if(position===0){
      alert('我是菜单')
    }
  };
  render() {
    return (
      <View style={{flex:1}}>
        <Text style={{textAlign:'center'}}>我这个导航中包含开关</Text>
        <ToolbarAndroid
          navIcon={require('../image/zhinengcunkuan.png')}
          style={{height:70,borderWidth:2,borderColor:'#000',backgroundColor:'#f00',marginBottom:40}}
          actions={[{title: '菜单', icon: require('../image/coin.png'), show:'never', showWithText: true},
            {title: '菜单', icon: require('../image/coin.png'), show:'ifRoom', showWithText: true},
            {title: '功能1', show:'always', showWithText: true}]}
        >
          <View style={{flex:1,flexDirection:'row',justifyContent:'center',}}>
            <Text>这是开关</Text>
            <Switch
              disabled={false}
              onValueChange={()=>this.changValue()}
              value={this.state.value1}
              onTintColor="#000"
              thumbTintColor="#0f0"
              tintColor="#e2e2e2"
              style={styles.switchStyle}
            />
          </View>
        </ToolbarAndroid>
        <Text style={{textAlign:'center'}}>我这个导航中包含子标题</Text>
        <ToolbarAndroid
          navIcon={require('../image/zhinengcunkuan.png')}
          subtitle="我是子标题"
          subtitleColor="#fff"
          overflowIcon={require('../image/chanpin_selected.png')}
          logo={require('../image/coin.png')}
          actions={[{title: '菜单', icon: require('../image/coin.png'), show:'always', showWithText: true}]}
          contentInsetEnd={20}
          contentInsetStart={20}
        style={{height:70,borderWidth:2,borderColor:'#000',backgroundColor:'#993333',marginBottom:40}}
        />
        <Text style={{textAlign:'center'}}>我这个导航中包含标题和子标题</Text>
        <ToolbarAndroid
          navIcon={require('../image/zhinengcunkuan.png')}
          title="AwesomeApp"
          titleColor="#0f0"
          subtitle="我是子标题"
          subtitleColor="#fff"
          overflowIcon={require('../image/chanpin_selected.png')}
          logo={require('../image/coin.png')}
          actions={[{title: '菜单', icon: require('../image/coin.png'), show:'ifRoom', showWithText: true}]}
          contentInsetEnd={50}
          contentInsetStart={20}
          style={{height:70,borderWidth:2,borderColor:'#000',backgroundColor:'gray',marginBottom:40}}
        />
        <Text style={{textAlign:'center'}}>我这个导航中包含右边菜单</Text>
        <ToolbarAndroid
          navIcon={require('../image/zhinengcunkuan.png')}
          title="AwesomeApp"
          titleColor="#0f0"
          subtitle="我是子标题"
          subtitleColor="#fff"
          overflowIcon={require('../image/chanpin_selected.png')}
          logo={require('../image/coin.png')}
          actions={[{title: '菜单', icon: require('../image/coin.png'), show:'never', showWithText: true},
            {title: '菜单', icon: require('../image/coin.png'), show:'ifRoom', showWithText: false},
            {title: '菜单', show:'always', showWithText: true}]}
          contentInsetEnd={20}
          contentInsetStart={20}
          style={{height:70,borderWidth:2,borderColor:'#000',backgroundColor:'#e2e2e2',marginBottom:40}}
        />
        <Text style={{textAlign:'center'}}>我这个导航中包含两个事件，菜单回调和图标回调</Text>
        <ToolbarAndroid
          navIcon={require('../image/zhinengcunkuan.png')}
          title={this.state.actionText}
          logo={require('../image/coin.png')}
          style={{height:70,borderWidth:2,borderColor:'#000',backgroundColor:'goldenrod'}}
          actions={[{title: '菜单', icon: require('../image/coin.png'), show:'never', showWithText: true},
            {title: '菜单', icon: require('../image/coin.png'), show:'ifRoom', showWithText: true},
            {title: '功能1', show:'always', showWithText: true}]}
          onActionSelected={this.onActionSelected}
          onIconClicked={() => this.setState({actionText:this.state.actionText=='我是标题'?'我是第二个标题':'我是标题'})}
        />
      </View>
    )
  }
}
const styles = StyleSheet.create({
  switchStyle:{
    borderWidth:2,
    borderColor:'#0f0'
  }
});
export default ToolbarObj;

/***
 *

 title string

 设置工具栏的标题。

 titleColor string

 设置工具栏的标题颜色。
 
 subtitle string

 设置工具条的子标题

 subtitleColor string

 设置工具条子标题的颜色。

 navIcon optionalImageSource

 设置导航器的icon。

 logo optionalImageSource

 设置整个工具条的徽标。
 
 overflowIcon optionalImageSource

 设置功能列表的弹出菜单的图标。,如果不设置，默认为三点点

 contentInsetEnd number

 设置Toolbar的右边缘和屏幕右边缘的距离。

 除了导航按钮和菜单以外，设置这一属性也会影响Toolbar的内容区域。它定义了Toolbar与屏幕边沿的最小边距，可以用来使Toolbar的内容和一些设计上的网格线对齐。

 contentInsetStart number

 设置Toolbar的左边缘和屏幕左边缘的距离。

 onActionSelected function

 当一个功能被选中的时候调用此回调。传递给此回调的唯一参数是该功能在actions数组中的位置。

 onIconClicked function

 当图标被选中的时候调用此回调。

 actions [{title: string, icon: optionalImageSource, show: enum('always', 'ifRoom', 'never'), showWithText: bool}]

 设置功能菜单中的可用功能。他们会显示为部件右侧的图标或文字。如果放不下，则会被放进一个弹出菜单里。

 这个属性接受一个对象数组，每个对象可以有如下的字段：

 title: 必须的, 功能的标题
 icon: 这个功能的图标，例如require('./some_icon')，如果省略，则会显示文字
 show: 是直接作为icon显示还是先隐藏，而在弹出菜单里显示：always总是显示，ifRoom如果放的下则显示，或者never从不显示。
 showWithText: 值为布尔类型，指定是否在图标旁边同时还显示文字
 
 testID string

 用来在端到端测试中定位这个视图。
 
 * ***/