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 (
            
                 }
                    renderSelectedIcon={() => }
                    onPress={() => this.setState({ selectedTab: CITY })}
                >
                    
                
                 }
                    renderSelectedIcon={() => }
                    onPress={() => this.setState({ selectedTab: MY })}
                >
                    
                
            
        );
    }

}

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 (
            Hello world!
        );
    }
}
第二页
import React, { Component } from 'react';
import { AppRegistry, Text } from 'react-native';

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

你可能感兴趣的:(RN入门之react-native-tab-navigator使用)