一、安装react-navigation
yarn add react-navigation
二、使用
import {
StackNavigator,
} from 'react-navigation';
const App = StackNavigator({
MyTab: {screen: MyTab},
Detail: {screen: Detail},
}, {
headerMode: 'float'
});
StackNavigatorConfig:
| 参数名称 | 参数简介 |
|---|---|
| initialRouteName | 设置默认的页面组件，必须是上面已注册的页面组件 |
| initialRouteParams | 初始路由的参数 |
| navigationOptions | 屏幕导航的默认选项 |
| paths | RouteConfigs里面路径设置的映射 |
| mode | 页面切换模式：card: 普通app常用的左右切换、modal: 上下切换 |
| headerMode | 导航栏的显示模式：float: 无透明效果, 默认、screen: 有渐变透明效果, 如微信QQ的一样、none: 隐藏导航栏 |
| cardStyle | 样式 |
| onTransitionStart | 页面切换开始时的回调函数 |
| onTransitionEnd | 页面切换结束时的回调函数 |
static navigationOptions = ({ navigation }) => ({
title: `Chat with ${navigation.state.params.id}`,
//右边按钮
headerRight:(
<View>
<Button
title="点我"
onPress={() => alert("hello")}
/>
</View>
),
//左上角的返回键文字, 默认是上一个页面的title IOS 有效
headerBackTitle : "返回",
//导航栏的style
headerStyle: {
backgroundColor: '#afafaf'
},
//导航栏的title的style
headerTitleStyle: {
color: 'blue',
alignSelf : 'center',
},
//按压返回按钮显示的颜色 API > 5.0 有效
headerPressColorAndroid : 'blue',
//返回按钮的颜色
headerTintColor : 'red',
//是否允许右滑返回，在iOS上默认为true，在Android上默认为false
gesturesEnabled: true,
});
navigationOptions:
| 参数名称 | 参数简介 |
|---|---|
| title | 导航栏的标题 |
| header | 导航栏设置对象 |
| headerTitle | 导航栏的标题, 可以是字符串也可以是个组件 |
| headerBackTitle | 左上角的返回键文字, 默认是上一个页面的title，设置这个属性会覆盖掉title的值 |
| headerRight | 导航栏右按钮 |
| headerLeft | 导航栏左按钮 |
| headerStyle | 导航栏的style |
| headerTitleStyle | 导航栏的title的style |
| headerTintColor | 返回按钮的颜色 |
| headerPressColorAndroid | 按压返回按钮显示的颜色 安卓系统 >= 5.0才有效。 |
| gesturesEnabled | 是否允许右滑返回，在iOS上默认为true，在Android上默认为false |
网友评论