/**
* 组件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
用来在端到端测试中定位这个视图。
* ***/
