[ReactNative] Cleanup TabBar and its example
This commit is contained in:
Родитель
5be7fae286
Коммит
4d44d9cca2
|
@ -55,29 +55,25 @@ class JumpingNavBar extends React.Component {
|
||||||
render() {
|
render() {
|
||||||
return (
|
return (
|
||||||
<View style={styles.tabs}>
|
<View style={styles.tabs}>
|
||||||
<TabBarIOS
|
<TabBarIOS>
|
||||||
selectedTab={'tab_' + this.props.tabIndex}>
|
|
||||||
<TabBarIOS.Item
|
<TabBarIOS.Item
|
||||||
name="tab_0"
|
|
||||||
icon={require('image!tabnav_notification')}
|
icon={require('image!tabnav_notification')}
|
||||||
selected={this.props.tabIndex === 0}
|
selected={this.props.tabIndex === 0}
|
||||||
onPress={() => { this.props.onTabIndex(0); }}
|
onPress={() => { this.props.onTabIndex(0); }}>
|
||||||
children={<View />}
|
<View />
|
||||||
/>
|
</TabBarIOS.Item>
|
||||||
<TabBarIOS.Item
|
<TabBarIOS.Item
|
||||||
name="tab_1"
|
|
||||||
icon={require('image!tabnav_list')}
|
icon={require('image!tabnav_list')}
|
||||||
selected={this.props.tabIndex === 1}
|
selected={this.props.tabIndex === 1}
|
||||||
onPress={() => { this.props.onTabIndex(1); }}
|
onPress={() => { this.props.onTabIndex(1); }}>
|
||||||
children={<View />}
|
<View />
|
||||||
/>
|
</TabBarIOS.Item>
|
||||||
<TabBarIOS.Item
|
<TabBarIOS.Item
|
||||||
name="tab_2"
|
|
||||||
icon={require('image!tabnav_settings')}
|
icon={require('image!tabnav_settings')}
|
||||||
selected={this.props.tabIndex === 2}
|
selected={this.props.tabIndex === 2}
|
||||||
onPress={() => { this.props.onTabIndex(2); }}
|
onPress={() => { this.props.onTabIndex(2); }}>
|
||||||
children={<View />}
|
<View />
|
||||||
/>
|
</TabBarIOS.Item>
|
||||||
</TabBarIOS>
|
</TabBarIOS>
|
||||||
</View>
|
</View>
|
||||||
);
|
);
|
||||||
|
|
|
@ -22,9 +22,8 @@ var {
|
||||||
Text,
|
Text,
|
||||||
View,
|
View,
|
||||||
} = React;
|
} = React;
|
||||||
var TabBarItemIOS = TabBarIOS.Item;
|
|
||||||
var TabBarExample = React.createClass({
|
|
||||||
|
|
||||||
|
var TabBarExample = React.createClass({
|
||||||
statics: {
|
statics: {
|
||||||
title: '<TabBarIOS>',
|
title: '<TabBarIOS>',
|
||||||
description: 'Tab-based navigation.'
|
description: 'Tab-based navigation.'
|
||||||
|
@ -42,19 +41,16 @@ var TabBarExample = React.createClass({
|
||||||
return (
|
return (
|
||||||
<View style={[styles.tabContent, {backgroundColor: color}]}>
|
<View style={[styles.tabContent, {backgroundColor: color}]}>
|
||||||
<Text style={styles.tabText}>{pageText}</Text>
|
<Text style={styles.tabText}>{pageText}</Text>
|
||||||
<Text style={styles.tabText}>{this.state.presses} re-renders of this tab</Text>
|
<Text style={styles.tabText}>{this.state.presses} re-renders of the More tab</Text>
|
||||||
</View>
|
</View>
|
||||||
);
|
);
|
||||||
},
|
},
|
||||||
|
|
||||||
render: function() {
|
render: function() {
|
||||||
return (
|
return (
|
||||||
<TabBarIOS
|
<TabBarIOS>
|
||||||
selectedTab={this.state.selectedTab}>
|
<TabBarIOS.Item
|
||||||
<TabBarItemIOS
|
title="Blue Tab"
|
||||||
name="blueTab"
|
|
||||||
icon={_ix_DEPRECATED('favorites')}
|
|
||||||
accessibilityLabel="Blue Tab"
|
|
||||||
selected={this.state.selectedTab === 'blueTab'}
|
selected={this.state.selectedTab === 'blueTab'}
|
||||||
onPress={() => {
|
onPress={() => {
|
||||||
this.setState({
|
this.setState({
|
||||||
|
@ -62,12 +58,10 @@ var TabBarExample = React.createClass({
|
||||||
});
|
});
|
||||||
}}>
|
}}>
|
||||||
{this._renderContent('#414A8C', 'Blue Tab')}
|
{this._renderContent('#414A8C', 'Blue Tab')}
|
||||||
</TabBarItemIOS>
|
</TabBarIOS.Item>
|
||||||
<TabBarItemIOS
|
<TabBarIOS.Item
|
||||||
accessibilityLabel="Red Tab"
|
systemIcon="history"
|
||||||
name="redTab"
|
badge={this.state.notifCount > 0 ? this.state.notifCount : undefined}
|
||||||
icon={_ix_DEPRECATED('history')}
|
|
||||||
badgeValue={this.state.notifCount ? String(this.state.notifCount) : null}
|
|
||||||
selected={this.state.selectedTab === 'redTab'}
|
selected={this.state.selectedTab === 'redTab'}
|
||||||
onPress={() => {
|
onPress={() => {
|
||||||
this.setState({
|
this.setState({
|
||||||
|
@ -76,11 +70,9 @@ var TabBarExample = React.createClass({
|
||||||
});
|
});
|
||||||
}}>
|
}}>
|
||||||
{this._renderContent('#783E33', 'Red Tab')}
|
{this._renderContent('#783E33', 'Red Tab')}
|
||||||
</TabBarItemIOS>
|
</TabBarIOS.Item>
|
||||||
<TabBarItemIOS
|
<TabBarIOS.Item
|
||||||
name="greenTab"
|
systemIcon="more"
|
||||||
icon={_ix_DEPRECATED('more')}
|
|
||||||
accessibilityLabel="Green Tab"
|
|
||||||
selected={this.state.selectedTab === 'greenTab'}
|
selected={this.state.selectedTab === 'greenTab'}
|
||||||
onPress={() => {
|
onPress={() => {
|
||||||
this.setState({
|
this.setState({
|
||||||
|
@ -89,7 +81,7 @@ var TabBarExample = React.createClass({
|
||||||
});
|
});
|
||||||
}}>
|
}}>
|
||||||
{this._renderContent('#21551C', 'Green Tab')}
|
{this._renderContent('#21551C', 'Green Tab')}
|
||||||
</TabBarItemIOS>
|
</TabBarIOS.Item>
|
||||||
</TabBarIOS>
|
</TabBarIOS>
|
||||||
);
|
);
|
||||||
},
|
},
|
||||||
|
@ -107,14 +99,4 @@ var styles = StyleSheet.create({
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
// This is needed because the actual image may not exist as a file and
|
|
||||||
// is used by the native code to load a system image.
|
|
||||||
// TODO(nicklockwood): How can this fit our require system?
|
|
||||||
function _ix_DEPRECATED(imageUri) {
|
|
||||||
return {
|
|
||||||
uri: imageUri,
|
|
||||||
isStatic: true,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
module.exports = TabBarExample;
|
module.exports = TabBarExample;
|
||||||
|
|
|
@ -13,8 +13,9 @@
|
||||||
|
|
||||||
var React = require('React');
|
var React = require('React');
|
||||||
var ReactIOSViewAttributes = require('ReactIOSViewAttributes');
|
var ReactIOSViewAttributes = require('ReactIOSViewAttributes');
|
||||||
var TabBarItemIOS = require('TabBarItemIOS');
|
|
||||||
var StyleSheet = require('StyleSheet');
|
var StyleSheet = require('StyleSheet');
|
||||||
|
var TabBarItemIOS = require('TabBarItemIOS');
|
||||||
|
var View = require('View');
|
||||||
|
|
||||||
var createReactIOSNativeComponentClass = require('createReactIOSNativeComponentClass');
|
var createReactIOSNativeComponentClass = require('createReactIOSNativeComponentClass');
|
||||||
|
|
||||||
|
@ -22,6 +23,11 @@ var TabBarIOS = React.createClass({
|
||||||
statics: {
|
statics: {
|
||||||
Item: TabBarItemIOS,
|
Item: TabBarItemIOS,
|
||||||
},
|
},
|
||||||
|
|
||||||
|
propTypes: {
|
||||||
|
style: View.propTypes.style,
|
||||||
|
},
|
||||||
|
|
||||||
render: function() {
|
render: function() {
|
||||||
return (
|
return (
|
||||||
<RCTTabBar style={[styles.tabGroup, this.props.style]}>
|
<RCTTabBar style={[styles.tabGroup, this.props.style]}>
|
||||||
|
|
|
@ -24,12 +24,57 @@ var merge = require('merge');
|
||||||
|
|
||||||
var TabBarItemIOS = React.createClass({
|
var TabBarItemIOS = React.createClass({
|
||||||
propTypes: {
|
propTypes: {
|
||||||
icon: Image.propTypes.source.isRequired,
|
/**
|
||||||
onPress: React.PropTypes.func.isRequired,
|
* Little red bubble that sits at the top right of the icon.
|
||||||
selected: React.PropTypes.bool.isRequired,
|
*/
|
||||||
badgeValue: React.PropTypes.string,
|
badge: React.PropTypes.oneOfType([
|
||||||
title: React.PropTypes.string,
|
React.PropTypes.string,
|
||||||
|
React.PropTypes.number,
|
||||||
|
]),
|
||||||
|
/**
|
||||||
|
* Items comes with a few predefined system icons. Note that if you are
|
||||||
|
* using them, the title and selectedIcon will be overriden with the
|
||||||
|
* system ones.
|
||||||
|
*/
|
||||||
|
systemIcon: React.PropTypes.oneOf([
|
||||||
|
'bookmarks',
|
||||||
|
'contacts',
|
||||||
|
'downloads',
|
||||||
|
'favorites',
|
||||||
|
'featured',
|
||||||
|
'history',
|
||||||
|
'more',
|
||||||
|
'most-recent',
|
||||||
|
'most-viewed',
|
||||||
|
'recents',
|
||||||
|
'search',
|
||||||
|
'top-rated',
|
||||||
|
]),
|
||||||
|
/**
|
||||||
|
* A custom icon for the tab. It is ignored when a system icon is defined.
|
||||||
|
*/
|
||||||
|
icon: Image.propTypes.source,
|
||||||
|
/**
|
||||||
|
* A custom icon when the tab is selected. It is ignored when a system
|
||||||
|
* icon is defined. If left empty, the icon will be tinted in blue.
|
||||||
|
*/
|
||||||
|
selectedIcon: Image.propTypes.source,
|
||||||
|
/**
|
||||||
|
* Callback when this tab is being selected, you should change the state of your
|
||||||
|
* component to set selected={true}.
|
||||||
|
*/
|
||||||
|
onPress: React.PropTypes.func,
|
||||||
|
/**
|
||||||
|
* It specifies whether the children are visible or not. If you see a
|
||||||
|
* blank content, you probably forgot to add a selected one.
|
||||||
|
*/
|
||||||
|
selected: React.PropTypes.bool,
|
||||||
style: View.propTypes.style,
|
style: View.propTypes.style,
|
||||||
|
/**
|
||||||
|
* Text that appears under the icon. It is ignored when a system icon
|
||||||
|
* is defined.
|
||||||
|
*/
|
||||||
|
title: React.PropTypes.string,
|
||||||
},
|
},
|
||||||
|
|
||||||
getInitialState: function() {
|
getInitialState: function() {
|
||||||
|
@ -63,13 +108,21 @@ var TabBarItemIOS = React.createClass({
|
||||||
tabContents = <View />;
|
tabContents = <View />;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
var icon = this.props.systemIcon || (
|
||||||
|
this.props.icon && this.props.icon.uri
|
||||||
|
);
|
||||||
|
|
||||||
|
var badge = typeof this.props.badge === 'number' ?
|
||||||
|
'' + this.props.badge :
|
||||||
|
this.props.badge;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<RCTTabBarItem
|
<RCTTabBarItem
|
||||||
icon={this.props.icon.uri}
|
icon={icon}
|
||||||
selectedIcon={this.props.selectedIcon && this.props.selectedIcon.uri}
|
selectedIcon={this.props.selectedIcon && this.props.selectedIcon.uri}
|
||||||
onPress={this.props.onPress}
|
onPress={this.props.onPress}
|
||||||
selected={this.props.selected}
|
selected={this.props.selected}
|
||||||
badgeValue={this.props.badgeValue}
|
badgeValue={badge}
|
||||||
title={this.props.title}
|
title={this.props.title}
|
||||||
style={[styles.tab, this.props.style]}>
|
style={[styles.tab, this.props.style]}>
|
||||||
{tabContents}
|
{tabContents}
|
||||||
|
|
|
@ -31,19 +31,20 @@
|
||||||
static dispatch_once_t onceToken;
|
static dispatch_once_t onceToken;
|
||||||
dispatch_once(&onceToken, ^{
|
dispatch_once(&onceToken, ^{
|
||||||
systemIcons = @{
|
systemIcons = @{
|
||||||
@"more": @(UITabBarSystemItemMore),
|
@"bookmarks": @(UITabBarSystemItemBookmarks),
|
||||||
|
@"contacts": @(UITabBarSystemItemContacts),
|
||||||
|
@"downloads": @(UITabBarSystemItemDownloads),
|
||||||
@"favorites": @(UITabBarSystemItemFavorites),
|
@"favorites": @(UITabBarSystemItemFavorites),
|
||||||
@"featured": @(UITabBarSystemItemFeatured),
|
@"featured": @(UITabBarSystemItemFeatured),
|
||||||
@"topRated": @(UITabBarSystemItemTopRated),
|
|
||||||
@"recents": @(UITabBarSystemItemRecents),
|
|
||||||
@"contacts": @(UITabBarSystemItemContacts),
|
|
||||||
@"history": @(UITabBarSystemItemHistory),
|
@"history": @(UITabBarSystemItemHistory),
|
||||||
@"bookmarks": @(UITabBarSystemItemBookmarks),
|
@"more": @(UITabBarSystemItemMore),
|
||||||
|
@"most-recent": @(UITabBarSystemItemMostRecent),
|
||||||
|
@"most-viewed": @(UITabBarSystemItemMostViewed),
|
||||||
|
@"recents": @(UITabBarSystemItemRecents),
|
||||||
@"search": @(UITabBarSystemItemSearch),
|
@"search": @(UITabBarSystemItemSearch),
|
||||||
@"downloads": @(UITabBarSystemItemDownloads),
|
@"top-rated": @(UITabBarSystemItemTopRated),
|
||||||
@"mostRecent": @(UITabBarSystemItemMostRecent),
|
|
||||||
@"mostViewed": @(UITabBarSystemItemMostViewed),
|
|
||||||
};
|
};
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
||||||
// Update icon
|
// Update icon
|
||||||
|
|
Загрузка…
Ссылка в новой задаче