react|react navigation - stackNavigator详细配置（中文版）
说明
本文是根据 navigation action 的官方最新文档一步一步写出来的配置，没个配置都有加详细的说明，如果说明不够理解请将页面滚动到最底部 加 qq 群一起讨论
下面代码注释可以取消看效果
如果你觉得该文章对你有帮助加个喜欢，github 加个 start 谢谢
import React, { Component } from 'react'
import { Platform, StyleSheet, View, Text, Button, Image } from 'react-native'
import { StackNavigator } from 'react-navigation'class MyHomeScreen extends Component {
static navigationOptions = ({ navigation }) => {
const { state: { params } } = navigation
return {
title: `Home ${params.user}`
}
}
render() {
const {
state: { params, routerName, key },
navigate,
setParams
} = this.props.navigation
const { user } = params
return (
HomePage {params.user}
)
}
}class MyUserScreen extends Component {
// 以静态方法的形式配置 navigationOptions
static navigationOptions = ({ navigation }) => {
const { state: { params } } = navigation
return {
title: `User is ${params.user}`
}
}
render() {
const { state: { params } } = this.props.navigation
return (
UserName: {params.user}
)
}
}const styles = StyleSheet.create({
disFlex: {
flex: 1,
justifyContent: 'center',
alignItems: 'center'
}
})export default StackNavigator(
{
Home: {
screen: MyHomeScreen,
navigationOptions: {}
},
Users: {
screen: MyUserScreen,
navigationOptions: {}
}
},
{
/**
* header 头部标题切换过渡效果
*
* float：切换页面时保持顶部固定显示 从右至左 平滑显示 这是 ios 上常见的模式
* screen：切换时整屏淡入淡出，每个屏幕上都有自身的标题这是 android 常见的模式
* none： 头部标题隐藏
*/
headerMode: 'float',
/*
* 屏幕切换时的过渡效果
*
* card： 使用 ios 或 android 默认切换动画。
* modal： 从底部向上划入，此为 ios 常见效果，对 android 无效
*
* @type {String}
* @default 'card'
*/
mode: 'card',
/**
* 使用这个属性可以覆盖或者扩展堆栈中单个屏幕的默认样式
* 配置来自reactnative所支持的样式
*/
cardStyle: {
backgroundColor: '#ffffff',
borderColor: '#ff0000',
borderWidth: 0
},
transitionConfig() {},
/**
* 当屏幕切换动画开始的时候执行
*/
onTransitionStart() {
console.log('动画开始了，干点啥吧~')
},
/**
* 当屏幕切换动画结束的时候执行
*/
onTransitionEnd() {
console.log('动画结束了，干点啥吧~')
},
navigationOptions: {
/**
* 用作于 headerTitle 的备用标题字符串。
* 当前套在 TabNavigator 中 将用作于 tabBarLabel 的备用标题字符串
* 或
* 当前套在 DrawerNavigator 中 将用作于 drawerLabel 的备用标题字符串
*/
title: 'home',
/**
* 自定义 header 接受一个组件，也可是是自定义组件，你也可
* 以传入 props 进去进行动态显示你想展示的内容
*
* 本案例作影藏处理，如果你想看效果请把注释取消
*/
// header: (
//首页
//
// ),
/**
* 头部导航标题可以是字符串也可以是一个 react 组件 如果
* 是组件使用方法如上所示不做阐述
* 允许字体缩放
*/
// headerTitle: (
//
//
// )
// headerTitle: '你好你好你好啊啊啊啊离开点击分类阿斯利康减肥哎算了大姐夫',
/**
* 不知道咋玩的，测试没啥效果
*/
headerTitleAllowFontScaling: true,
/**
* 是否允许滑动手势来取消当前屏幕ios 默认为 true 在 android 上默认为false
*/
gesturesEnabled: true,
/**
* 手势响应距离
*/
gestureResponseDistance: {
//横向手势距离
horizontal: 25
//竖向手势距离
// vertical: 135
},
/**
* 手势方向 默认 left-to-right
* inverted 反向
*/
// gestureDirection: 'inverted',
/**
* 返回显示的文字，默认为上一级页面的名称，null为不显示
*/
// headerBackTitle: null,
/**
* 如果返回显示的文字过长，则用该属性的字符串替代
*/
headerTruncatedBackTitle: '返回',
/**
* header 右侧显示的元素，react 元素
*/
headerRight: fdsa ,
headerBackTitleStyle: {
color: '#000000'
},
/**
* header 样式
*/
headerStyle: {},
/**
* header 标题样式
*/
headerTitleStyle: {
color: '#000000'
},
/**
* header 色调
*/
headerTintColor: '#ff0000'
},
/**
* 过渡配置
* 更多玩法待研究
*/
transitionConfig: () => ({
// transitionSpec: {
//duration: 100,
//// easing: Easing.out(Easing.poly(4)),
//// timing: Animated.timing
// },
// screenInterpolator: sceneProps => {
//const { layout, position, scene } = sceneProps
//const { index } = scene
//const height = layout.initHeight
//const translateY = position.interpolate({
//inputRange: [index - 1, index, index + 1],
//outputRange: [height, 0, 0]
//})
//const opacity = position.interpolate({
//inputRange: [index - 1, index - 0.99, index],
//outputRange: [0, 1, 1]
//})
//return { opacity, transform: [{ translateY }] }
// }
}),
initialRouteParams: {
// 设置初始参数
user: 'Sawyer'
}
}
)如果你对文章感兴趣 或者有其他技术问题探讨 【react|react navigation - stackNavigator详细配置（中文版）】qq群：218618405
github 地址：https://github.com/Sawyer-china/
本实例 地址： https://github.com/Sawyer-china/react-navigation-demo
推荐阅读
- react|react 安装
- React.js学习笔记(17)|React.js学习笔记(17) Mobx
- React.js的表单(六)
- 【React|【React Native填坑之旅】从源码角度看JavaModule注册及重载陷阱
- react-navigation|react-navigation 动态修改 tabBar 样式
- Flutter|Flutter SwiftUI React 对比
- React|React refs和onRefs的使用
- 手写|手写 React-Native 方法调用式的 Modal 弹框、Toast 提示
- react组件通信
- react-native中Text包含Image大小问题