點選更改標題

export default class ChatScreen extends Component {
    static navigationOptions=({navigation})=>{
        const {state,setParams} = navigation;
        return({
            title:state.params.title?state.params.title:'ChatTitle',
            });
        };
    constructor(props){
        super
 
(props);
        this.changeTitle = this.changeTitle.bind(this);
    }
    changeTitle(value){
        const {setParams}=this.props.navigation;
        setParams({title:value});
    }
    render() {
        const { params } = this.props.navigation.state;
        return (
            <View>
                <Button title='點選更改標題'
 
 onPress={()=>this.changeTitle('更改標題')}/>
                <Button title={'回退'} onPress={()=>this.props.navigation.goBack()}></Button>
            </View>
        );
    }
}
const TestNavigation = StackNavigator({
    Main: {
        screen: MainScreen,
    },
    Chat: {
        screen
 
: ChatScreen,
        //請不要在這裡設定屬性，不然屬性將無法更改
        // navigationOptions: {
         // title: 'ChatTitle', //若要動態設定title,這裡不能設定title
        // }
    },
});

標題居中

第一種方法，更改原始碼
在node_modules/react-navigation/src/views/Header/Header.js下的title樣式改成

title: {
    bottom: 0,
    top: 0,
    left: TITLE_OFFSET,
    right: TITLE_OFFSET,
    position: 'absolute',
    alignItems: 'center',
    justifyContent:'center'
}

第二種方法：

headerTitleStyle{
    flex:1,
    textAlign:'center',
}

這樣需要導航欄兩邊一致，即左邊有控制元件右邊也要有。因為預設有返回按鈕，可以在右邊這樣設定：

 headerRight:<View/>

與ios介面滑動動畫一致（從右往左）

import CardStackStyleInterpolator from 'react-navigation/src/views/CardStack/CardStackStyleInterpolator';
 transitionConfig: () => ({
            screenInterpolator: CardStackStyleInterpolator.forHorizontal,
        }),

DrawerNavigator中onItemPress無效

在原始碼中並未實現此方法。
可以自定義抽屜元件，在DrawerItems中此方法實現了。

contentComponent: (props) => { //自定義抽屜元件
            return (
                <SafeAreaView>
                <View>
                    <View style={{paddingVertical: 20, paddingHorizontal: 15, backgroundColor:'#00f'}}>
                        <Text style={{color:'#FFF'}}>抽屜</Text>
                    </View>
                    <DrawerItems {...{...props,onItemPress:(router)=>{console.warn('1');}}} />
                </View>
            </SafeAreaView>
            );
        },

DrawerNavigator,StackNavigator,TabNavigator整合

DrawerNavigator巢狀StackNavigator
StackNavigator巢狀TabNavigator

graph TD
 A[DrawerNavigation]-->B(MainScreen)
 A -->C(RecordScreen)
 B-->D(MainTab)
 B-->E(MainDetailScreen)
 D-->F(MainTab1Screen)
 D-->G(MainTab2Screen)

combinationDemo.js

import React, { Component } from 'react';
import {
    DrawerNavigator,
    DrawerItems,
    SafeAreaView,
} from 'react-navigation';
import {
    View,
    Image,
    Text,
    StatusBar
} from 'react-native';
import MainScreen from './MainScreen';
import RecordScreen from './RecordScreen';
const DrawerNavigation = DrawerNavigator({
    Main: {
        screen: MainScreen,
        navigationOptions: {
            drawerLabel: '首頁',
            drawerIcon: ({ tintColor }) => {
                <Image source={require('./fogOff.png')} style={{ width: 24, height: 24, tintColor: tintColor }} />
            },
        }
    },
    Record: {
        screen: RecordScreen,
        navigationOptions: {
            drawerLabel: '歷史記錄',
            drawerIcon: ({ tintColor }) => {
                <Image source={require('./fogOff.png')} style={{ width: 24, height: 24, tintColor: tintColor }} />
            },
        }
    }
}, {
        contentOptions: {
            activeTintColor: '#ff0000',
            activeBackgroundColor: '#666666',
            inactiveTintColor: '#000000',
            inactiveBackgroundColor: '#ffffff',
            itemsContainerStyle:{
                paddingVertical:0, //DrawerItem上下有個邊距
                backgroundColor:'#fff' //防止點選時顯示SafeAreaView的背景顏色
            }
        },
        contentComponent: (props) => {
            return (
                <View>
                    {/*Android沉浸式*/}
                    <StatusBar
                        backgroundColor={'rgba(0,0,0,0.4)'}
                        translucent={true} 
                        barStyle={'default'}/>
                    {/*使ios狀態列顏色與頂部顏色相同,更像沉浸式*/}
                    <SafeAreaView style={{backgroundColor:'#f0f'}}>  
                        <View>
                            <View style={{ paddingVertical: 30, paddingHorizontal: 15, backgroundColor: '#f0f' }}>
                                <Image source={require('./fogOff.png')}></Image>
                                <Text style={{ color: '#FFF' }}>點選頭像登陸</Text>
                            </View>
                            <DrawerItems {...props}/>
                        </View>
                    </SafeAreaView>
                </View>
            );
        }
    });
export default class CombinationDemo extends Component {
    render() {
        return (
            <DrawerNavigation />
        );
    }
}

MainScreen.js

import React,{Component} from 'react';
import{
    Text,
    View,
}from 'react-native';
import{
    StackNavigator,
    TabNavigator,
}from 'react-navigation';
import MainDetailScreen from './MainDetailScreen';
import RecordScreen from './RecordScreen';
import MainTab1Screen from './MainTab1Screen';
import MainTab2Screen from './MainTab2Screen';
import CardStackStyleInterpolator from 'react-navigation/src/views/CardStack/CardStackStyleInterpolator';
const MainTab = TabNavigator({
    MainTab1:{
        screen:MainTab1Screen,
    },
    MainTab2:{
        screen:MainTab2Screen,
    },
},{

});
const MainStack = StackNavigator({
    MainActivity:{
        screen:MainTab,
        navigationOptions:{
            headerTitle:'MainActivity',
            header:null,
        }
    },
    MainDetail:{
        screen:MainDetailScreen,
        navigationOptions:{
            headerTitle:'MainDetail',
        }
    },
},{
    navigationOptions:{
        headerTitleStyle:{
            flex:1,
            textAlign:'center',
            color:'#fff'
        },
        headerStyle:{
           height:70,
           paddingTop:40,
           paddingBottom:15,
           backgroundColor:'#f0f',
        },
        headerTintColor:'#fff',//返回按鈕顏色
        headerBackTitle:' ',
        headerRight:<View/>,
    },
    transitionConfig:()=>({
        screenInterpolator: CardStackStyleInterpolator.forHorizontal,
    }),
});
export default class MainScreen extends Component{
    render(){
        return(
            <MainStack/>
        );
    }
} 

RecordScreen.js

import React,{Component} from 'react';
import{
    Text,
    View,
}from 'react-native';
export default class RecordScreen extends Component{
    render(){
        return(
            <View style={{flex:1,justifyContent:'center',alignItems:'center'}}>
                <Text>RecordScreen</Text>
            </View>
        );
    }
} 

MainDetailScreen.js

import React,{Component} from 'react';
import {
    View,
    Text,
}from 'react-native';
export default class MainDetailScreen extends Component{
    render(){
        return(
            <View style={{flex:1,justifyContent:'center',alignItems:'center'}}>
                <Text>MainDetailScreen</Text>
            </View>
        );
    }
}  

MainTab1Screen.js

import React,{Component} from 'react';
import {
    View,
    Text,
    Button,
}from 'react-native';
export default class MainTab1Screen extends Component{
    render(){
        const {navigate} = this.props.navigation;
        console.log(this.props.navigation);
        return(
            <View style={{flex:1,justifyContent:'center',alignItems:'center'}}>
                <Text>MainTab1Screen</Text>
                <Button title='跳轉' onPress={()=>{navigate('MainDetail')}}></Button>
            </View>
        );
    }
} 

MainTab2Screen.js

import React,{Component} from 'react';
import {
    View,
    Text,
    Button,
}from 'react-native';
export default class MainTab2Screen extends Component{
    render(){
        return(
            <View style={{flex:1,justifyContent:'center',alignItems:'center'}}>
                <Text>MainTab2Screen</Text>
            </View>
        );
    }
}