美文网首页
TabBarIOS使用实例学习

TabBarIOS使用实例学习

作者: mindasiy | 来源:发表于2016-11-22 10:41 被阅读0次

    将下面的代码放入index.ios.js 文件中预览就可以看到你想要的了

    importReact,{Component}from'react';

    import{AppRegistry,StyleSheet,Text,View,TabBarIOS,}from'react-native';

    classTabBarIOSDemoextendsComponent{

    constructor(props){

    super(props);

    this.state={

    selectedTab:'历史',

    notifCount:0,

    presses:0,

    };

    }

    //进行渲染页面内容

    _renderContent(color: string,pageText: string,num?:number) {

    return(

    {pageText}

    第{num}次重复渲染{pageText}

    )

    }

    render() {

    return(

    TabBarIOS使用实例

    style={{flex:1,alignItems:"flex-end"}}

    tintColor="white"

    barTintColor="darkslateblue">

    title="自定义"

    icon={require('./src/images/timer.png')}

    selected={this.state.selectedTab==='自定义'}

    onPress={()=>{

    this.setState({

    selectedTab:'自定义',

    });

    }}

    >

    {this._renderContent('#414A8C','自定义界面')}

    systemIcon="history"

    selected={this.state.selectedTab==='历史'}

    badge={this.state.notifCount>0?this.state.notifCount:undefined}

    onPress={()=>{

    this.setState({

    selectedTab:'历史',

    notifCount:this.state.notifCount+1,

    });

    }}

    >

    {this._renderContent('#783E33','历史记录',this.state.notifCount)}

    systemIcon="downloads"

    selected={this.state.selectedTab==='下载'}

    onPress={()=>{

    this.setState({

    selectedTab:'下载',

    presses:this.state.presses+1

    });

    }}>

    {this._renderContent('#21551C','下载页面',this.state.presses)}

    );

    }

    }

    conststyles= StyleSheet.create({

    tabContent:{

    flex:1,

    alignItems:'center',

    },

    welcome:{

    fontSize:20,

    textAlign:'center',

    marginTop:20,

    },

    tabText:{

    color:'white',

    margin:50,

    },

    });

    AppRegistry.registerComponent('AwesomeProject',()=>TabBarIOSDemo);

    相关文章

      网友评论

          本文标题:TabBarIOS使用实例学习

          本文链接:https://www.haomeiwen.com/subject/qmyppttx.html