react-natigation导航栏

点击更改标题

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>
        );
    }
}