RN学习6.1 -- TabBarIOS

运行结果：

Simulator Screen Shot 2017年6月1日 上午10.33.30.png

代码：

import React, {
    Component,

} from 'react';
import {
    TabBarIOS,
    NavigatorIOS,
    View,
    Image,
    StyleSheet,

} from 'react-native';

class App extends Component {
    // 构造
      constructor(props) {
        super(props);
        // 初始状态
        this.state = { selectedBarItem:0 }
      }
    render() {
        return (
            <View style={styles.container}>
                {/*tabbar 标签栏*/}
                <TabBarIOS
                    // unselectedTintColor="white" /* 当前没有被选中的标签图标的颜色。仅在iOS 10及以上版本有效*/
                    tintColor="red" /* 标签图标的颜色*/
                    barTintColor="black" /* 标签栏的背景色*/
                    translucent={true}/* 半透明*/>

                    <TabBarIOS.Item
                        title="看点"
                        renderAsOriginal={true}
                        icon={require('./images/tab_bar_item_circle.png')}
                        selectedIcon={require('./images/tab_bar_item_circle_select.png')}
                        selected={this.state.selectedBarItem == 0}
                        onPress={()=>{
                            this.setState({
                                selectedBarItem:0
                            });
                        }}
                        >
                        <View style={[styles.conViewStyle, {backgroundColor:'yellow'}]}>

                        </View>
                    </TabBarIOS.Item>

                    <TabBarIOS.Item
                        title="广场"
                        renderAsOriginal={true}
                        icon={require('./images/tab_bar_item_news.png')}
                        selectedIcon={require('./images/tab_bar_item_news_select.png')}
                        selected={this.state.selectedBarItem == 1}
                        onPress={()=>{
                            this.setState({
                                selectedBarItem:1
                            });
                        }}
                    >
                        <View style={[styles.conViewStyle, {backgroundColor:'red'}]}>

                        </View>
                    </TabBarIOS.Item>

                    <TabBarIOS.Item
                        title="发现"
                        renderAsOriginal={true}
                        icon={require('./images/tab_bar_item_discover.png')}
                        selectedIcon={require('./images/tab_bar_item_discover_select.png')}
                        selected={this.state.selectedBarItem == 2}
                        onPress={()=>{
                            this.setState({
                                selectedBarItem:2
                            });
                        }}
                    >
                        <View style={[styles.conViewStyle, {backgroundColor:'yellow'}]}>

                        </View>
                    </TabBarIOS.Item>

                    <TabBarIOS.Item
                        title="我"
                        renderAsOriginal={true}
                        icon={require('./images/tab_bar_item_personal.png')}
                        selectedIcon={require('./images/tab_bar_item_personal_select.png')}
                        selected={this.state.selectedBarItem == 3}
                        onPress={()=>{
                            this.setState({
                                selectedBarItem:3
                            });
                        }}
                    >
                        <View style={[styles.conViewStyle, {backgroundColor:'red'}]}>

                        </View>
                    </TabBarIOS.Item>

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

var styles = StyleSheet.create({
    container:{
        flex:1,
        alignContent:'center',
    },
    conViewStyle:{
        flex:1,
        justifyContent:'center',
        alignContent:'center',
    }
});
module.exports = App;

注意点：

1. TabBarIOS.Item 中要添加对应的View，否则会报错

<TabBarIOS.Item
                      title="看点"
                      renderAsOriginal={true}
                      icon={require('./images/tab_bar_item_circle.png')}
                      selectedIcon={require('./images/tab_bar_item_circle_select.png')}
                      selected={this.state.selectedBarItem == 0}
                      onPress={()=>{
                          this.setState({
                              selectedBarItem:0
                          });
                      }}
                      >
                      <View style={[styles.conViewStyle, {backgroundColor:'yellow'}]}>

                      </View>
                  </TabBarIOS.Item>