React Native 的组件之底部导航栏 TabBarIOS（一）-白红宇

React Native 的组件之底部导航栏 TabBarIOS（一）

阅读量：4959 次

发布时间：2019-06-12

本文共 1909 字，大约阅读时间需要 6 分钟。

import React,{Component}from 'react';import {  AppRegistry,  StyleSheet,  Text,  View,  TabBarIOS,} from 'react-native';import History from './History'class TabBarIOSDemo extends Component {  constructor(props){    super(props);    this.state={      selectedTab: '发现',       notifCount: 0,       presses: 0,    };  }  //进行渲染页面内容  _renderContent(color: string, pageText: string, num: number) {    return (      
             
      
       {pageText}
            
         );  }  render() {    return (      
             
              
       
         {            this.setState({              selectedTab: '主页',            });          }}          >          {this._renderContent('#414A8C', 'one')}        
               
       
         {            this.setState({              selectedTab: '发现',              notifCount: this.state.notifCount + 1,            });          }}          >          {this._renderContent('#cccccc', '发现', this.state.notifCount)}        
               
       
         0 ? this.state.notifCount : undefined}          onPress={() => {            this.setState({              selectedTab: '我的',              notifCount: this.state.notifCount + 1,            });          }}          >          {this._renderContent('#783E33', '历史记录', this.state.notifCount)}        
               
       
         {            this.setState({              selectedTab: '下载',              presses: this.state.presses + 1            });          }}>           {this._renderContent('#21551C', '下载页面', this.state.presses)}        
             
            
         );  }}const styles = StyleSheet.create({  tabContent: {    flex: 1,    alignItems: 'center',  },  welcome: {    fontSize: 20,    textAlign: 'center',    marginTop: 20,  },  tabText: {    color: 'white',    margin: 50,  },});AppRegistry.registerComponent('Allen', () => TabBarIOSDemo )