React-Native TabBarIOS的学习

来源：互联网发布：氯氟醚菊酯0.6% 知乎编辑：程序博客网时间：2024/06/09 03:54

1.项目目录结构:
这里写图片描述

这里写图片描述

2.代码实现:
(1) index.ios.js

/** * Sample React Native App * https://github.com/facebook/react-native * @flow */import React, { Component } from 'react';import FirstVC from './FirstVC.js'import SecondVC from './SecondVC.js'import ThirdVC from './ThirdVC.js'import {  AppRegistry,  StyleSheet,  Text,  View,    TabBarIOS,} from 'react-native';export default class RN extends Component {  constructor(props){      super(props)      this.state= {          selectedTab: '图书',      }  }  render() {    return (        <TabBarIOS            /**            * TabBar 默认的属性            * barTintColor: tabBar的背景色            * //指定item的位置            * itemPositioning是个枚举:fill, center, auto            * translucent: bool 是否要半透明            * style:是个View类型            /**         /**         * tintColorItem未选中时的颜色         */            unselectedTintColor="yellow"            //Item选中的颜色            tintColor="white"            //tabBar的背景颜色            barTintColor= 'darkslateblue'            //itemPositioning= 'auto'            translucent= {true}            >          <TabBarIOS.Item              title='首页'              /**              * badge: string,number              * 角标: 测试可以显示红色的是七位,数字无限制              */              badge="99"              /**              * systemIcon: 枚举 ('bookmarks', 'contacts', 'downloads', 'favorites', 'featured', 'history', 'more', 'most-recent', 'most-viewed', 'recents', 'search', 'top-rated')              * 设置了此属性,会覆盖我们自定义的              */              //systemIcon = 'bookmarks'              //引用Xcode里面的Images.xcassets              //icon = {require('image!book')}              //引用外部的img文件夹              icon = {require('./img/book.png')}              //选中的图片              selectedIcon = {require('./img/movie.png')}              selected={this.state.selectedTab === '图书'}              //标签被选中时会调用,              onPress={() => {                this.setState({                    selectedTab: '图书'                 });              }}              >              <FirstVC />          </TabBarIOS.Item>          <TabBarIOS.Item              title='电影'              icon = {require('./img/movie.png')}              selected = {this.state.selectedTab === '电影'}              onPress={() => {            this.setState({              selectedTab: '电影'            });              }}              >             <SecondVC />          </TabBarIOS.Item>          <TabBarIOS.Item              title='音乐'              //icon = {require('./img/music.png')}              selected = {this.state.selectedTab === '音乐'}              onPress={() => {            this.setState({              selectedTab: '音乐'            });              }}              >             <ThirdVC />          </TabBarIOS.Item>        </TabBarIOS>    );  }}const styles = StyleSheet.create({});AppRegistry.registerComponent('RN', () => RN);

(2)FirstVC.js

import React, { Component } from 'react';import {    AppRegistry,    StyleSheet,    Text,    View,    TabBarIOS,} from 'react-native';export default class RN extends Component {    render() {        return(            <View style={{flex:1,justifyContent:'center',alignItems:'center'}}>                <Text style={{fontSize:20}}>123</Text>            </View>        )    }}

(3)SecondVC.js

import React, { Component } from 'react';import {    AppRegistry,    StyleSheet,    Text,    View,    TabBarIOS,} from 'react-native';export default class RN extends Component {    render() {        return(            <View style={[styles.textCenter]}>                <Text style={{fontSize:19}}>我的首秀</Text>            </View>        )    }}const styles = StyleSheet.create({    textCenter:{        flex:1,        justifyContent:'center',        alignItems:'center',        backgroundColor:'red',        //alignSelf:'center',    }});

(3)ThirdVC.js

import React, { Component } from 'react';import {    AppRegistry,    StyleSheet,    Text,    View,    TabBarIOS,} from 'react-native';export default class RN extends Component {    render() {        return(            <View style={{flex:1, width: 100, height:100,backgroundColor:'green',alignItems:'center',justifyContent:'center'}}>                <Text>90909090</Text>            </View>        )    }}

效果图:

这里写图片描述

0 0