React-Native TabBarIOS 学习笔记

React Native 官方文档

React Native 开源社区

TabBarIOS常见的属性

** View** 的所有属性都可使用
** barTintColor ** 背景颜色
** tintColor ** 被选中图标的颜色
** translucent** 半透明的效果

TabBarIOS.Item常见的属性

** badge** 类似角标
** icon Image.propTypes.source Tab**
** onPress **
selected
**electedIcon Image.propTypes.source **
**style **
**systemIcon ** 系统默认图标
enum('bookmarks','contacts','downloads','favorites','featured','history','more','most-recent','most-viewed','recents','search','top-rated')
** title **

Simulator Screen Shot.png

  import React, { Component } from 'react';
  import {
    AppRegistry, //负责入口组件
    StyleSheet, //负责创建样式表
    View,
    Text,
    Image,
    TabBarIOS
  } from 'react-native';

  var ViewController = React.createClass({
    
      //设置初始值
      getInitialState(){
        return{
          //默认被选中的tabBArItem
          selectedTabBarItem: 'home'
        }
      },

    render() {
      return (
        
        {/*导航栏视图*/}
         
           Tab选项卡切换
         

      {/*选项卡*/}
      

      {/*第1块*/}
      {
            this.setState({
              selectedTabBarItem: 'first'
            })
          }}
          >
          
              第一块
          
      

      {/*第2块*/}
      {
            this.setState({
              selectedTabBarItem: 'second'
            })
          }}
        >
        
              第二块
        
      

      {/*第3块*/}
      {
            this.setState({
              selectedTabBarItem: 'third'
            })
          }}
        >
        
              第三块
        
      

      {/*第4块*/}
      {
            this.setState({
              selectedTabBarItem: 'fourth'
            })
          }}
        >
        
              第四块
        
      

        
        
      );
    }
  });

  //设置风格样式
  const styles = StyleSheet.create({
    container: {
      flex: 1,
      backgroundColor: '#F5FCFF',
    },

    headerStyle: {
      flexDirection: 'row',
      height: 64,
      backgroundColor: '#ECECEC',
      alignItems: 'center',
      justifyContent: 'center'
    },

    contentStyle: {
      fontSize: 25,
      color: 'white'
    },

    navTextStyle: {
      marginTop: 10,
      color: 'black',
      fontSize: 17
    //  fontWeight: 'bold'
    },

    commonViewSytle: {
      flex: 1,
      alignItems: 'center',
      justifyContent: 'center',
      backgroundColor:'green'
    }
  });

  AppRegistry.registerComponent('HelloWorld', () => ViewController);