在React Native开发中，导航栏是一个关键组件。在v0.44版本之前，官方提供了Navigator组件，但之后被废弃，转而推荐使用更强大的第三方库react-navigation。react-navigation包含了三种常用导航方式：StackNavigator（顶部导航栏）、TabNavigator（标签导航栏）和DrawerNavigator（侧滑菜单导航栏）。本文将重点介绍StackNavigator的使用。
首先，确保项目中已安装react-navigation库。如果node_modules文件夹中没有，需要通过npm或yarn进行安装。安装完成后，在项目中引入StackNavigator。
创建一个Application.js文件，用于注册需要跳转的页面，类似于Android中的Activity注册。这个文件创建了navigation对象供后续操作。然后，修改Android和iOS的入口文件，加载Application.js，从而加载Main页面并显示内容。
在Main页面中，可以添加按钮实现页面跳转，并自定义导航栏样式。导航栏的样式通过navigationOptions属性配置，常用属性包括：
- headerTitle：设置导航栏标题。
- header：设置为null可隐藏导航栏。
- headerTintColor：设置返回按钮颜色。
- headerTitleStyle：设置导航栏文字样式。
- headerStyle：设置导航栏样式。
- headerRight：设置导航栏右边的视图，解决返回箭头导致的文字不居中问题。
- headerLeft：设置导航栏左边的视图，可用于去除返回箭头。
- headerBackTitle：设置跳转页面左侧返回箭头后的文字，默认为上一个页面标题。
- gestureResponseDistance：设置滑动返回的距离。
页面跳转时，可以通过navigation.navigate方法传递参数，例如传递一个键值为key的参数。在目标页面中，通过this.props.navigation.state.params接收传递的值。
对于带有菜单的页面，主要配置navigationOptions属性。隐藏左边返回箭头可通过设置headerLeft为实现；添加右边菜单可通过headerRight设置视图。菜单的点击事件需要在视图渲染完成后添加，通过TouchableOpacity等组件绑定点击函数，并在函数中实现相应逻辑，例如显示Alert对话框。
本文简要介绍了StackNavigator的基本使用和配置，更多详细属性和技巧可参考react-navigation官方文档。通过合理使用navigationOptions，可以灵活定制导航栏外观和行为，提升应用的用户体验。