React Navigation-StackNavigator

为您的应用程序屏幕转场提供方法。
默认情况下，StackNavigator被配置为拥有iOS和Android外观风格：iOS右侧滑入，Android从底部淡入。在iOS上，StackNavigator也可以配置为屏幕从底部滑入的模式样式。

class MyHomeScreen extends React.Component {static navigationOptions = { title: 'Home',}render() { return (

API定义

StackNavigator(RouteConfigs, StackNavigatorConfig)

RouteConfigs

路由配置对象是从路由名称到路由配置的映射，告诉导航器该路由呈现什么。

StackNavigator({  // For each screen that you can navigate to, create a new entry like this:  Profile: {    // `ProfileScreen` is a React component that will be the main content of the screen.    screen: ProfileScreen,    // When `ProfileScreen` is loaded by the StackNavigator, it will be given a `navigation` prop.    // Optional: When deep linking or using react-navigation in a web app, this path is used:    path: 'people/:name',    // The action and route params are extracted from the path.    // Optional: Override the `navigationOptions` for the screen    navigationOptions: ({navigation}) => ({      title: `${navigation.state.params.name}'s Profile'`,    }),  },  ...MyOtherRoutes,});

StackNavigatorConfig

路由器的配置：

initialRouteName - 设置默认的页面组件，必须是上面已注册的页面组件。
initialRouteParams - 初始路由的参数
navigationOptions - 用于屏幕的默认导航选项
paths- 路由配置中的路径覆盖映射。

path:path属性适用于其他app或浏览器使用url打开本app并进入指定页面。path属性用于声明一个界面路径，例如：【/pages/Home】。此时我们可以在手机浏览器中输入：app名称://pages/Home来启动该App，并进入Home界面。

视觉选项：

mode：定义渲染和转换的风格:
- card：使用iOS和安卓默认的风格,这个选项是默认的。
- modal：使屏幕从底部滑入，这是一种常见的iOS模式。只适用于iOS，对Android没有任何影响。
headerMode - 指定如何呈现标题：
- float - 渲染单个标题保持在顶部，并在屏幕更改时显示动画。这是iOS上的常见模式。
- screen - 每个屏幕都附有一个标题，标题与屏幕一起淡入和淡出。这是Android上的常见模式。
- none - 不会显示标题。
cardStyle - 使用这个属性覆盖或扩展堆栈中单个卡的默认样式。
transitionConfig - 用于返回与默认屏幕转换(滑动)合并的对象的函数. 提供的函数将传递以下参数：
- transitionProps - 新屏幕的转换props。
- prevTransitionProps - 旧屏幕的转换props。
- isModal - 指定屏幕状态。
onTransitionStart - 当转换动画即将开始时被调用的功能
onTransitionEnd - 当转换动画完成，将被调用的功能。

Screen Navigation Options

title：标题，如果设置了这个导航栏和标签栏的title就会变成一样的，所以不推荐使用这个方法。

header：可以设置一些导航的属性，当然如果想隐藏顶部导航条只要将这个属性设置为null就可以了。

headerTitle：设置导航栏标题，推荐用这个方法。

headerBackTitle：设置跳转页面左侧返回箭头后面的文字，默认是上一个页面的标题。可以自定义，也可以设置为null

headerTruncatedBackTitle：设置当上个页面标题不符合返回箭头后的文字时，默认改成"返回"。（上个页面的标题过长，导致显示不下，所以改成了短一些的。）

headerRight：设置导航条右侧。可以是按钮或者其他。

headerLeft：设置导航条左侧。可以是按钮或者其他。

headerStyle：设置导航条的样式。背景色，宽高等。如果想去掉安卓导航条底部阴影可以添加elevation: 0，iOS下用shadowOpacity: 0。

headerTitleStyle：设置导航条文字样式。安卓上如果要设置文字居中，只要添加alignSelf:'center'就可以了。在安卓上会遇到，如果左边有返回箭头导致文字还是没有居中的问题，最简单的解决思路就是在右边也放置一个空的按钮。

headerBackTitleStyle：设置导航条返回文字样式。

headerTintColor：设置导航栏文字颜色。总感觉和上面重叠了。

headerPressColorAndroid：安卓独有的设置颜色纹理，需要安卓版本大于5.0

gesturesEnabled：是否支持滑动返回手势，iOS默认支持，安卓默认关闭

gestureResponseDistance：对象覆盖触摸从屏幕边缘开始的距离，以识别手势。它具有以下属性：

horizontal -number - 水平方向的距离。默认为25。
vertical -number- 垂直方向的距离。默认为135。

gestureDirection覆盖退出手势的方向。正常行为的默认值，或从右到左滑动的情况下反转。

Navigator Props

由StackNavigator（...）创建的导航器组件采用以下props:

screenProps - 将其他选项传递给子屏幕，例如：

const SomeStack = StackNavigator({  // config});

Modal StackNavigator with Custom Screen Transitions

const ModalNavigator = StackNavigator( {   Main: { screen: Main },   Login: { screen: Login }, }, {   headerMode: 'none',   mode: 'modal',   navigationOptions: {     gesturesEnabled: false,   },   transitionConfig: () => ({     transitionSpec: {       duration: 300,       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 }] };     },   }), });