React native 之 tabbarIos
/**
 * 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);



阅读更多
个人分类: Reacr-Native
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

不良信息举报

React native 之 tabbarIos

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭