iOS 选项卡

属性

Edit on GitHub

style View#style

例子

Edit on GitHub

1. 'use strict';
2. var React = require('react-native');
3. var {
4. StyleSheet,
5. TabBarIOS,
6. Text,
7. View,
8. } = React;
9. var TabBarExample = React.createClass({
10. statics: {
11. title: '<TabBarIOS>',
12. description: 'Tab-based navigation.'
13. },
14. getInitialState: function() {
15. return {
16. selectedTab: 'redTab',
17. notifCount: 0,
18. presses: 0,
19. };
20. },
21. _renderContent: function(color: string, pageText: string) {
22. return (
23. <View style={[styles.tabContent, {backgroundColor: color}]}>
24. <Text style={styles.tabText}>{pageText}</Text>
25. <Text style={styles.tabText}>{this.state.presses} re-renders of the More tab</Text>
26. </View>
27. );
28. },
29. render: function() {
30. return (
31. <TabBarIOS>
32. <TabBarIOS.Item
33. title="Blue Tab"
34. selected={this.state.selectedTab === 'blueTab'}
35. onPress={() => {
36. this.setState({
37. selectedTab: 'blueTab',
38. });
39. }}>
40. {this._renderContent('#414A8C', 'Blue Tab')}
41. </TabBarIOS.Item>
42. <TabBarIOS.Item
43. systemIcon="history"
44. badge={this.state.notifCount > 0 ? this.state.notifCount : undefined}
45. selected={this.state.selectedTab === 'redTab'}
46. onPress={() => {
47. this.setState({
48. selectedTab: 'redTab',
49. notifCount: this.state.notifCount + 1,
50. });
51. }}>
52. {this._renderContent('#783E33', 'Red Tab')}
53. </TabBarIOS.Item>
54. <TabBarIOS.Item
55. systemIcon="more"
56. selected={this.state.selectedTab === 'greenTab'}
57. onPress={() => {
58. this.setState({
59. selectedTab: 'greenTab',
60. presses: this.state.presses + 1
61. });
62. }}>
63. {this._renderContent('#21551C', 'Green Tab')}
64. </TabBarIOS.Item>
65. </TabBarIOS>
66. );
67. },
68. });
69. var styles = StyleSheet.create({
70. tabContent: {
71. flex: 1,
72. alignItems: 'center',
73. },
74. tabText: {
75. color: 'white',
76. margin: 50,
77. },
78. });
79. module.exports = TabBarExample;