React Native react-navigation导航使用方法

在React Native项目中，页面跳转通常使用推荐的第三方导航控件react-navigation。本文将介绍如何集成和使用react-navigation。

集成react-navigation

1. 根据官方指引，在终端中切换到项目根目录，分别执行以下命令进行集成：

npm install --save react-native-navigation
npm install --save react-native-gesture-handler
react-native link react-native-gesture-handler

2. 在iOS项目中，打开Podfile文件，添加RCTLinkingIOS子模块：

pod 'React', :path => '../node_modules/react-native', :subspecs => [
    . . . // 其他子模块
    'RCTLinkingIOS',
    . . .
  ]

然后执行安装命令：

pod install

至此，react-navigation集成完成。

使用react-navigation

1. 参考官方文档，在根目录创建Navigator.js文件，内容如下：

import React from "react";
import { createStackNavigator, createAppContainer } from 'react-navigation'
import HotMovie from './src/page/HotMovie';
import MovieDetail from './src/page/MovieDetail'

const AppNavigator = createStackNavigator(
  {
    Home: HotMovie,
    Details: MovieDetail
  },
  {
    initialRouteName: "Home"
  }
)

const AppContainer = createAppContainer(AppNavigator);
export default class Navigator extends React.Component {
  render() {
    return <AppContainer />;
  }
}

其中HotMovie是电影列表页面，MovieDetail是新建的电影详情页面。

2. 创建MovieDetail.js文件，路径为./src/page/MovieDetail.js，用于展示电影详情，并通过导航参数接收数据。

3. 修改Index.js文件，注册相关组件：

import React from 'react';
import { AppRegistry } from 'react-native';
import HotMovie from './src/page/HotMovie';
import MovieDetail from './src/page/MovieDetail'
import Navigator from './Navigator';

AppRegistry.registerComponent('Navigator', () => Navigator);
AppRegistry.registerComponent('HotMovie', () => HotMovie);
AppRegistry.registerComponent('MovieDetail', () => MovieDetail);

4. 在iOS项目的ViewController.m文件中，配置跳转逻辑以加载React Native导航模块。

5. 在HotMovie.js中添加点击事件，使用this.props.navigation.navigate('Details', params)进行页面跳转。如需多次跳转到相同页面，可使用push方法；返回上一页使用goBack方法。

6. 设置导航标题：可以通过静态属性navigationOptions定义固定标题，或从导航参数中动态获取。此外，可以统一配置导航栏样式，如背景颜色、文字颜色和字体。

   • 在Navigator.js中，通过defaultNavigationOptions设置全局样式：

   defaultNavigationOptions: {
     headerTintColor: '#fff',
     headerStyle: {
       backgroundColor: '#f4511e',
     },
     headerTitleStyle: {
       fontWeight: 'bold',
     },
   }
   

   • 在HotMovie.js中，使用自定义组件作为标题：

   static navigationOptions = {
     headerTitle: <LogoTitle />,
   };
   

   • 在MovieDetail.js中，根据参数设置标题：

   static navigationOptions = ({ navigation }) => {
     return {
       title: navigation.getParam('title','电影详情')
     }
   }
   

完整源代码可在GitHub仓库查看：https://github.com/dolacmeng/RNProject/tree/master

通过以上步骤，可以在React Native应用中实现页面导航功能，并自定义导航栏外观。