关闭

React native 之 tabbarIos

39人阅读 评论(0) 收藏 举报
分类:
/**
 * Created by lhb on 16/8/29.
 */
/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
    AppRegistry, //注册
    StyleSheet,  //样式
    Text,
    View,
    Image,
    TextInput,
    TouchableOpacity,
    AlertIOS,
    ScrollView,
    ListView,
    TabBarIOS

} from 'react-native';

class ClassName {
    constructor() {

    }
}

//获取窗口信息
var Dimensions = require('Dimensions');
var SreenWidth = Dimensions.get('window').width;





var FScrollViewDemo1 = React.createClass({


    getInitialState(){


        return{

            //被选中的tabItem

            selectTabBarItem:'home'
        }

    },

    render(){

        return (


            <View style={styles.container}>

                <View style={styles.tabChoiceHead}>

                    <Text>Tab选项卡切换</Text>

                </View>

                {/**选项卡*/}
                <TabBarIOS barTintColor={'black'}>
                    {/**选项卡*/}
                    <TabBarIOS.Item
                        systemIcon='contacts'
                        title="张三"
                        badge='3'
                        selected={this.state.selectTabBarItem == 'home'}
                        onPress={()=>{this.setState({selectTabBarItem:'home'})}}
                    >

                        <View style={[styles.commonViewStytle,{backgroundColor:'red'}]}>

                            <Text> 首页</Text>
                        </View>

                    </TabBarIOS.Item>

                    {/**选项卡*/}
                    <TabBarIOS.Item
                        systemIcon='bookmarks'
                        selected={this.state.selectTabBarItem == 'second'}
                        onPress={()=>{this.setState({selectTabBarItem:'second'})}}
                    >
                        <View style={[styles.commonViewStytle,{backgroundColor:'green'}]}>

                            <Text> 第二页</Text>
                        </View>

                    </TabBarIOS.Item>

                    {/**选项卡*/}
                    <TabBarIOS.Item

                        systemIcon='downloads'
                        selected={this.state.selectTabBarItem == 'third'}
                        onPress={()=>{this.setState({selectTabBarItem:'third'})}}
                    >
                        <View style={[styles.commonViewStytle,{backgroundColor:'blue'}]}>

                            <Text> 第三页</Text>
                        </View>


                    </TabBarIOS.Item>

                    {/**选项卡*/}
                    <TabBarIOS.Item
                        systemIcon='search'
                        selected={this.state.selectTabBarItem == 'forth'}
                        onPress={()=>{this.setState({selectTabBarItem:'forth'})}}


                    >
                        <View style={[styles.commonViewStytle,{backgroundColor:'purple'}]}>

                            <Text> 第四页</Text>
                        </View>

                    </TabBarIOS.Item>
                </TabBarIOS>

            </View>
        );
    },



});



const styles = StyleSheet.create({

    container:{

        flex:1,
        backgroundColor:'#F5FCFF',
        paddingTop:20

    },
    commonViewStytle:{

        flex:1,
        justifyContent:'center',
        alignItems:'center'

    },

    tabChoiceHead:{

        height:44,
        justifyContent:'center',
        alignItems:'center'
    }

});

AppRegistry.registerComponent('second', () => FScrollViewDemo1);



0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:345次
    • 积分:63
    • 等级:
    • 排名:千里之外
    • 原创:6篇
    • 转载:0篇
    • 译文:0篇
    • 评论:0条
    文章分类