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 (
        <View style={styles.container}>
        {/*导航栏视图*/}
         <View style={styles.headerStyle}>
           <Text style={styles.navTextStyle}>Tab选项卡切换</Text>
         </View>

      {/*选项卡*/}
      <TabBarIOS
          barTintColor='black'
          translucent = {true}
          tintColor = 'white'
        //  style={{width:375}}
      >

      {/*第1块*/}
      <TabBarIOS.Item
          systemIcon="contacts"
          badge="3"
          selected={this.state.selectedTabBarItem == 'first'}
          onPress={()=>{
            this.setState({
              selectedTabBarItem: 'first'
            })
          }}
          >
          <View style={styles.commonViewSytle}>
              <Text style={styles.contentStyle}>第一块</Text>
          </View>
      </TabBarIOS.Item>

      {/*第2块*/}
      <TabBarIOS.Item
          systemIcon="bookmarks"
          selected={this.state.selectedTabBarItem == 'second'}
          onPress={()=>{
            this.setState({
              selectedTabBarItem: 'second'
            })
          }}
        >
        <View style={[styles.commonViewSytle,{backgroundColor: '#FFCD5E'}]}>
              <Text style={styles.contentStyle}>第二块</Text>
        </View>
      </TabBarIOS.Item>

      {/*第3块*/}
      <TabBarIOS.Item
          systemIcon="downloads"
          selected={this.state.selectedTabBarItem == 'third'}
          onPress={()=>{
            this.setState({
              selectedTabBarItem: 'third'
            })
          }}
        >
        <View style={[styles.commonViewSytle,{backgroundColor:'#E54341'}]}>
              <Text style={styles.contentStyle}>第三块</Text>
        </View>
      </TabBarIOS.Item>

      {/*第4块*/}
      <TabBarIOS.Item
          systemIcon="search"
          selected={this.state.selectedTabBarItem == 'fourth'}
          onPress={()=>{
            this.setState({
              selectedTabBarItem: 'fourth'
            })
          }}
        >
        <View style={[styles.commonViewSytle,{backgroundColor:'#488DEE'}]}>
              <Text style={styles.contentStyle}>第四块</Text>
        </View>
      </TabBarIOS.Item>

        </TabBarIOS>
        </View>
      );
    }
  });

  //设置风格样式
  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);