kylefang/react-native
1
0
Fork 0
mirror of https://github.com/zhigang1992/react-native.git synced 2026-04-24 04:16:00 +08:00
Code Issues Packages Projects Releases Wiki Activity

[ReactNative] Cleanup TabBar and its example

Browse Source
This commit is contained in:
Christopher Chedeau
2015-04-02 13:35:03 -07:00
parent 5be7fae286
commit 4d44d9cca2
5 changed files with 104 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
Examples/UIExplorer/Navigator/JumpingNavSample.js
View File

@@ -55,29 +55,25 @@ class JumpingNavBar extends React.Component {
render() {
return (
<View style={styles.tabs}>
<TabBarIOS
selectedTab={'tab_' + this.props.tabIndex}>
<TabBarIOS>
<TabBarIOS.Item
name="tab_0"
icon={require('image!tabnav_notification')}
selected={this.props.tabIndex === 0}
onPress={() => { this.props.onTabIndex(0); }}
children={<View />}
/>
onPress={() => { this.props.onTabIndex(0); }}>
<View />
</TabBarIOS.Item>
<TabBarIOS.Item
name="tab_1"
icon={require('image!tabnav_list')}
selected={this.props.tabIndex === 1}
onPress={() => { this.props.onTabIndex(1); }}
children={<View />}
/>
onPress={() => { this.props.onTabIndex(1); }}>
<View />
</TabBarIOS.Item>
<TabBarIOS.Item
name="tab_2"
icon={require('image!tabnav_settings')}
selected={this.props.tabIndex === 2}
onPress={() => { this.props.onTabIndex(2); }}
children={<View />}
/>
onPress={() => { this.props.onTabIndex(2); }}>
<View />
</TabBarIOS.Item>
</TabBarIOS>
</View>
);

44
Examples/UIExplorer/TabBarIOSExample.js
View File

@@ -22,9 +22,8 @@ var {
Text,
View,
} = React;
var TabBarItemIOS = TabBarIOS.Item;
var TabBarExample = React.createClass({
var TabBarExample = React.createClass({
statics: {
title: '<TabBarIOS>',
description: 'Tab-based navigation.'
@@ -42,19 +41,16 @@ var TabBarExample = React.createClass({
return (
<View style={[styles.tabContent, {backgroundColor: color}]}>
<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>
);
},
render: function() {
return (
<TabBarIOS
selectedTab={this.state.selectedTab}>
<TabBarItemIOS
name="blueTab"
icon={_ix_DEPRECATED('favorites')}
accessibilityLabel="Blue Tab"
<TabBarIOS>
<TabBarIOS.Item
title="Blue Tab"
selected={this.state.selectedTab === 'blueTab'}
onPress={() => {
this.setState({
@@ -62,12 +58,10 @@ var TabBarExample = React.createClass({
});
}}>
{this._renderContent('#414A8C', 'Blue Tab')}
</TabBarItemIOS>
<TabBarItemIOS
accessibilityLabel="Red Tab"
name="redTab"
icon={_ix_DEPRECATED('history')}
badgeValue={this.state.notifCount ? String(this.state.notifCount) : null}
</TabBarIOS.Item>
<TabBarIOS.Item
systemIcon="history"
badge={this.state.notifCount > 0 ? this.state.notifCount : undefined}
selected={this.state.selectedTab === 'redTab'}
onPress={() => {
this.setState({
@@ -76,11 +70,9 @@ var TabBarExample = React.createClass({
});
}}>
{this._renderContent('#783E33', 'Red Tab')}
</TabBarItemIOS>
<TabBarItemIOS
name="greenTab"
icon={_ix_DEPRECATED('more')}
accessibilityLabel="Green Tab"
</TabBarIOS.Item>
<TabBarIOS.Item
systemIcon="more"
selected={this.state.selectedTab === 'greenTab'}
onPress={() => {
this.setState({
@@ -89,7 +81,7 @@ var TabBarExample = React.createClass({
});
}}>
{this._renderContent('#21551C', 'Green Tab')}
</TabBarItemIOS>
</TabBarIOS.Item>
</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;