使用react-navigation的StackNavigator跳转页面时，有给页面设置初始化props的需求。根据应用场景不同，本文总结了三种方式：
场景一：所有页面设置初始props
如果要为所有页面设置初始props，且应用程序最外层的导航是StackNavigator，直接用screenProps即可。对官方文档摘录如下：
const SomeStack = StackNavigator({
// config
});
<SomeStack
screenProps={{ propKey: propValue }}
/>
在页面中使用this.props.screenProps即可获取screenProps的内容。
场景二：子StackNavigator下的所有页面设置初始props
这种场景更为常见。多个StackNavigator嵌套时，如果要为子StackNavigator下所有页面设置初始props，同样使用screenProps这个属性，但需参照以下写法：
const setScreenProps = SomeComponent =>
class extends SomeComponent {
render() {
return <SomeComponent {...this.props} screenProps={{ propKey: propValue }} />;
}
};
const innerStack = StackNavigator({
// config
});
const outerStack = StackNavigator({
innerStackKey: { screen: setScreenProps(innerStack) },
// other screen
});
首先定义了一个函数setScreenProps，为StackNavigator添加screenProps属性。然后在outerStack的定义中，使用这个函数做跳转入口。
这样设置之后，innerStack下的所有页面，都可以使用this.props.screenProps获取screenProps的内容。
场景三：某个特定页面设置初始props
这种场景无需使用screenProps，直接添加组件的属性即可，代码示例如下：
const SomeStack = StackNavigator({
someScreenKey: { screen: props => <SomeScreenView {...props} myProp="value" /> },
// other screen
});
this.props.myProp就可以获取设置的属性。注意，必须参照上述代码。踩过的坑有：
-
screen: <SomeScreenView myProp="value" />直接输出RN组件，会报错。react-navigation在此处有校验，必须传入一个函数。 -
screen: () => <SomeScreenView myProp="value" />这种写法，SomeScreenView将没有navigation。
参考资料
以上内容参考 react-navigation github的issue。当学习使用新的、快速发展的技术时，github的issue比Google和Stack Overflow好用一百倍！
原博文发布在个人博客，欢迎访问！！
