React Native --react-navigation

从0.44版本开始，Navigator被从react native的核心组件库中剥离到了一个名为react-native-deprecated-custom-components的单独模块中。如果你需要继续使用Navigator，则需要先npm i -S react-native-deprecated-custom-components，然后从这个模块中import，即import { Navigator } from 'react-native-deprecated-custom-components'.

React Navigation：

1.首先在应用中安装此库： $npm install --save react-navigation.

2.导入：import {StackNavigator} from 'react-navigation';

Demo1：

import React, { Component } from 'react';
import {
    AppRegistry,
    Text,
    View,
    Button,
} from 'react-native';
import { StackNavigator} from 'react-navigation';

class HomeScreen extends React.Component {
    static navigationOptions = {
        title: 'Welcome',
        headerRight: <Button title="More"/>,
    }
    render() {
        const {navigate} = this.props.navigation;
        return (
            <View>
            <Text>Hello, Navigator</Text>
            <Button
                onPress = {() => navigate('Chat', {user: 'cece'})} 
                title='start to chat'
            > </Button>
            </View>
        );
    }
}

class ChatScreen extends Component {
    static navigationOptions = {
        title: 'Chat with friends',
    }
    render() {
        const {params} = this.props.navigation.state; 
        return(
            <View><Text>chat with {params.user}</Text></View>
        );
    }
}

const SimpleApp = StackNavigator({
    Home: {screen: HomeScreen},
    Chat: {screen: ChatScreen},

});
AppRegistry.registerComponent('HiFang', () => SimpleApp);

2. Nesting Navigators

首先import TabNavigator.

import React from 'react';
import { TabNavigator} from 'react-navigation';
import {
    AppRegistry,
    Text,
    View,
    Button,
} from 'react-native';

class ChatScreen extends React.Component {
    render() {
        return <Text>comment list</Text>;
    }
}

class ContactScreen extends React.Component {
    render() {
        return <Text>contact list</Text>;
    }
}
const ScreenNavigator = TabNavigator({
    Comment: {screen: ChatScreen},
    Contact: {screen: ContactScreen},
});
AppRegistry.registerComponent('HiFang', () => ScreenNavigator);