• js - page - Page0.js
• js - page - Page1.js
• js - page - Page2.js
• app.js

index.js:

import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View,
    Image,
    Button,
} from 'react-native';

import Page0 from './js/page/Page0';
import Page2 from './js/page/Page2';

import { StackNavigator } from 'react-navigation';

const RootStack = StackNavigator(
    {
        Home: {
            screen: Page0,
        },
        Details: {
            screen: Page2,
        },
    },
    {
        initialRouteName: 'Home',
    }
);

export default class App extends Component<Props> {
    constructor(props) {
        super(props);
    }

  render() {
      return <RootStack />;
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
    image:{
      height:22,
        width:22,
        tintColor:'red'
    },
});

Page0.js:

import React, { Component } from 'react';
import {
    Platform,
    StyleSheet,
    Text,
    View,
    Image,
    Button,
} from 'react-native';

import TabNavigator from 'react-native-tab-navigator';

import Page1 from './Page1';

export default class ContentPage extends Component<Props> {
    constructor(props) {
        super(props);

        this.state={
            selectedTab:'tb_popular',
        }
    }

    render() {
        return (
            <TabNavigator>
                <TabNavigator.Item selected={this.state.selectedTab === 'tb_popular'}
                                   selectedTitleStyle={{color:'red'}}
                                   title='最热'
                                   renderIcon={() => <Image style={styles.image} source={require('../../res/images/ic_polular.png')} /> }
                                   renderSelectedIcon={()=><Image style={styles.image} source={require('../../res/images/ic_polular.png')}/>}
                                   onPress={()=>this.setState({selectedTab:'tb_popular'})}
                >
                    <Page1 navigation={this.props.navigation}/>
                </TabNavigator.Item>

            </TabNavigator>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    image:{
        height:22,
        width:22,
        tintColor:'red'
    },
});

module.exports = ContentPage;

Page1.js:

import React, { Component } from 'react';
import {
    Platform,
    StyleSheet,
    Text,
    View,
    Button,
} from 'react-native';

export default class ContentPage extends Component<Props> {

    constructor(props) {
        super(props);

    }

    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.text}>
                    Page1
                </Text>
                <Button
                    title="Go to Details"
                    onPress={() => {
                        this.props.navigation.navigate('Details', {content:'sss'})
                    }}
                />
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex:1,
        backgroundColor: '#33eec6',
    },
    text:{
        fontSize: 60
    }
});

module.exports = ContentPage;

Page2:

import React, { Component } from 'react';
import {
    Platform,
    StyleSheet,
    Text,
    View,
    Button,
} from 'react-native';

export default class ContentPage extends Component<Props> {
    constructor(props) {
        super(props);
    }

    static navigationOptions = ({ navigation }) => ({
        header: null,
        title: `Chat with ${navigation.state.params.content}`,
    });

    render() {
        const { params } = this.props.navigation.state;

        return (
            <View>
                <Text>Details Screen with {params.content}</Text>
                <Button
                    title="Go to Details"
                    onPress={() => this.props.navigation.goBack()}
                />
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex:1,
        backgroundColor: '#4444c6',
    },
    text:{
        fontSize: 60
    }
});

module.exports = ContentPage;