React native 之 tabbarIos

原创 2016年08月29日 11:07:29
/**
 * 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);



react-native-vector-icons的简单使用,图片,按钮,标签视图,导航条

ICONS是可以直接使用图片名, 就能加载图片的三方,使用很方便, 你不需要在工程文件夹里塞各种图片, 节省很多空间,下面就来看看怎么使用吧! 1. 首先打开terminal进入到我们的工程文件夹下...
  • Margaret_MO
  • Margaret_MO
  • 2016年05月07日 12:18
  • 4982

React Native 版本升级与降级

React Native 版本升级与降级(一)前言现在React Native For Android刚刚开源才不久,现在整体功能还不健全完善以及开发中的坑(Bug)还是比较多的 ,以至于到现在还没...
  • u014484863
  • u014484863
  • 2016年06月02日 10:58
  • 5451

React Native从入门到放弃

React Native从入门到放弃最近工作清闲,自己做了个技术调研,选的就是React Native。下面总结下最近一段时间对React Native的研究。Web基础 了解html与dom、jav...
  • xia215266092
  • xia215266092
  • 2016年05月15日 14:31
  • 6083

从零开始学React Native App开发

目录 1. React Native简介      1.1 从何而来,背景介绍      1.2 为什么要使用React Native开发      1.3 环境搭建      1.4 基础开发工具与...
  • chenbifeng
  • chenbifeng
  • 2016年05月25日 11:22
  • 14473

React-Native 如何将图片作为页面的背景以及控件的嵌套实现启动应用

转载请标明出处:http://blog.csdn.net/u010046908/article/details/50781360 本文出自:【李东的博客】最近一直非常的关注react-native的开...
  • u010046908
  • u010046908
  • 2016年03月04日 20:06
  • 17247

为React Native开发写的JS和React入门知识

来自Leo的原创博客,转载请著名出处我的stackoverflow前言 想来想去,还是需要写一篇文章来介绍下JavaScript和React的基本知识。最初开发ReactNative的时候,完全没...
  • Hello_Hwc
  • Hello_Hwc
  • 2016年04月20日 16:22
  • 23859

[React Native]访问操作系统剪贴板 Clipboard

我们之前学习了TextInput组件, 有时候我们需要在TextInput组件中复制或者粘贴一些文字。 React Native为开发者提供了 Clipboard API,Clipboard 组件可...
  • yulianlin
  • yulianlin
  • 2016年08月31日 16:29
  • 2273

React Native布局详细指南

一款好的APP离不了一个漂亮的布局,本文章将向大家分享React Native中的布局方式FlexBox。  在React Native中布局采用的是FleBox(弹性框)进行布局。 Flex...
  • quanqinayng
  • quanqinayng
  • 2016年08月15日 22:43
  • 16957

Android之Windows下搭建React Native Android开发环境(差不多搞了一天)

最新情报 0.12已经发布。很多原本需要手动修改BUG的部分很多已经不再需要。 安装JDK 从Java官网下载JDK并安装。请注意选择x86还是x64版本。 推荐将JDK的bin目录加入系统P...
  • u011068702
  • u011068702
  • 2015年10月27日 14:43
  • 17488

React Native声明属性和属性确认

属性声明因为用React Native创建的自定义组件可以复用, 我们开发过程中可能一个项目组有多个人同时开发,其他同事可能会用到我们自定义的组件, 但是他们使用的时候很容易忘记使用某些属性,这时候我...
  • yulianlin
  • yulianlin
  • 2016年08月05日 15:47
  • 3760
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:React native 之 tabbarIos
举报原因:
原因补充:

(最多只允许输入30个字)