RN入门之react-native-tab-navigator使

Tab根页

import React, {
    Component
} from 'react';
import {
    AppRegistry,View,StyleSheet,Text,Image,Navigator
} from 'react-native';
import TabNavigator from 'react-native-tab-navigator';
import CityPage from 'FirstProj/src/CityPage';
import MyPage from 'FirstProj/src/MyPage';

const CITY = 'city';
const CITY_NORMAL = require('FirstProj/img/城市-常态@2x.png');
const CITY_FOCUS = require('FirstProj/img/城市-点击@2x.png');
const MY = 'my';
const MY_NORMAL = require('FirstProj/img/我的-常态@2x.png');
const MY_FOCUS = require('FirstProj/img/我的-点击@2x.png');

export default class launcher extends Component {

    // 构造
      constructor(props) {
        super(props);
        // 初始状态
        this.state = {
            selectedTab:CITY
        };
      }

    render() {
        return (
            <TabNavigator style={styles.container}>
                <TabNavigator.Item
                    selected = {this.state.selectedTab === CITY}
                    title = '城市'
                    selectedTitleStyle={{color: "#3496f0"}}
                    renderIcon={() => <Image source={CITY_NORMAL} style={styles.tabIcon}/>}
                    renderSelectedIcon={() => <Image source={CITY_FOCUS} style={styles.tabIcon}/>}
                    onPress={() => this.setState({ selectedTab: CITY })}
                >
                    <CityPage/>
                </TabNavigator.Item>
                <TabNavigator.Item
                    selected = {this.state.selectedTab === MY}
                    title = '我'
                    selectedTitleStyle={{color: "#3496f0"}}
                    renderIcon={() => <Image source={MY_NORMAL} style={styles.tabIcon}/>}
                    renderSelectedIcon={() => <Image source={MY_FOCUS} style={styles.tabIcon}/>}
                    onPress={() => this.setState({ selectedTab: MY })}
                >
                    <MyPage/>
                </TabNavigator.Item>
            </TabNavigator>
        );
    }

}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    tab: {
        height:52,
        backgroundColor:'#faebd7',
        alignItems:'center'
    },
    tabIcon: {
        width:30,
        height:35,
        resizeMode:'stretch',
        marginTop:10
    }
})

AppRegistry.registerComponent('FirstProj',() => launcher);

第一页

import React, { Component } from 'react';
import { AppRegistry, Text } from 'react-native';

export default class CityPage extends Component {
    render() {
        return (
            <Text>Hello world!</Text>
        );
    }
}

第二页

import React, { Component } from 'react';
import { AppRegistry, Text } from 'react-native';

export default class CityPage extends Component {
    render() {
        return (
            <Text>Hello worldddddddddddddddd!</Text>
        );
    }
}