建站
咨詢
售后
建站咨詢
新聞中心
這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
創(chuàng)新互聯(lián)React教程：ToolbarAndroid
React 組件，包裝了 Android Toolbar 小工具。工具欄可以顯示一個標志，導(dǎo)航圖標（如漢堡包菜單），標題和副標題和操作列表。標題和子標題被擴展這樣以來標志和導(dǎo)航圖標顯示在左邊，標題和副標題在中間并且操作在右邊。
如果工具欄具有唯一子級，它將顯示在標題和操作之間。
例子：
render: function() {
return (
)
},
onActionSelected: function(position) { if (position === 0) { // index of 'Settings'
}
}
屬性
actions [{title: string, icon: Image.propTypes.source, show: enum('always', 'ifRoom', 'never'), showWithText: bool}]
將工具欄上的可能動作設(shè)置為動作菜單的一部分。這些都顯示為圖標或小部件右側(cè)的文本。如果不適合，它們將被放置在一個'溢出'菜單。
此屬性需要一個對象數(shù)組，其中每個對象具有以下鍵：
-
title:必要的, 這個操作的標題 -
icon: 這個操作的圖標，例如：require('image!some_icon') -
show:當把這個操作顯示為一個圖標或隱藏在溢出菜單中時：always,ifRoom或never -
showWithText: 布爾值，是否顯示圖標旁邊的文本
logo Image.propTypes.source
設(shè)置工具欄的標志。
navIcon Image.propTypes.source
設(shè)置導(dǎo)航圖標。
onActionSelected function
被選中時調(diào)用回調(diào)函數(shù)。傳遞到回調(diào)的唯一參數(shù)是操作數(shù)組中的位置。
onIconClicked function
在選定圖標時調(diào)用。
subtitle string
設(shè)置工具欄副標題。
subtitleColor string
設(shè)置工具欄副標題的顏色。
testID string
用于在端到端測試中查找此視圖。
title string
設(shè)置工具欄標題。
titleColor string
設(shè)置工具欄副標題的顏色。
例子
'use strict';
var React = require('react-native');
var {
StyleSheet,
Text,
View,
} = React;
var UIExplorerBlock = require('./UIExplorerBlock');
var UIExplorerPage = require('./UIExplorerPage');
var SwitchAndroid = require('SwitchAndroid');
var ToolbarAndroid = require('ToolbarAndroid');
var ToolbarAndroidExample = React.createClass({
statics: {
title: '',
description: 'Examples of using the Android toolbar.'
},
getInitialState: function() { return {
actionText: 'Example app with toolbar component',
toolbarSwitch: false,
colorProps: {
titleColor: '#3b5998',
subtitleColor: '#6a7180',
},
};
},
render: function() { return (
">
this.setState({actionText: 'Icon clicked'})}
style={styles.toolbar}
subtitle={this.state.actionText}
title="Toolbar" />
{this.state.actionText}
this.setState({'toolbarSwitch': value})} />
{'\'Tis but a switch'}
this.setState({colorProps: {}})}
title="Wow, such toolbar"
style={styles.toolbar}
subtitle="Much native"
{...this.state.colorProps} />
Touch the icon to reset the custom colors to the default (theme-provided) ones.
);
}, _onActionSelected: function(position) { this.setState({
actionText: 'Selected ' + toolbarActions[position].title,
});
},
});
var toolbarActions = [
{title: 'Create', icon: require('image!ic_create_black_48dp'), show: 'always'},
{title: 'Filter'},
{title: 'Settings', icon: require('image!ic_settings_black_48dp'), show: 'always'},
];
var styles = StyleSheet.create({
toolbar: {
backgroundColor: '#e9eaed',
height: 56,
},
});
module.exports = ToolbarAndroidExample;
分享標題：創(chuàng)新互聯(lián)React教程：ToolbarAndroid
本文路徑：http://m.fisionsoft.com.cn/article/dhiippo.html
