点击更改标题
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>
);
}
}