React Native Router Flux 核心 API 与配置详解

最新推荐文章于 2025-06-04 09:20:20 发布

崔暖荔

最新推荐文章于 2025-06-04 09:20:20 发布

阅读量269

点赞数 4

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/gitblog_00301/article/details/148419305

React Native Router Flux 核心 API 与配置详解

react-native-router-flux aksonov/react-native-router-flux: 这是一个为React Native开发的应用程序提供的导航解决方案，它基于React Navigation，并提供额外的功能如动态路由配置、简化路由管理以及更直观的状态管理。项目地址: https://gitcode.com/gh_mirrors/re/react-native-router-flux

React Native Router Flux 是一个基于 React Navigation 的增强型路由库，为 React Native 应用提供了更简洁的路由配置方式和更强大的导航功能。本文将深入解析其核心 API 和配置选项，帮助开发者更好地掌握这一工具。

核心组件概览

React Native Router Flux 提供了多种路由组件，每种组件都有其特定的用途：

Router - 路由容器，所有场景的根容器
Scene - 基本路由单元，每个场景对应一个屏幕
Tabs - 标签页导航容器
Stack - 堆栈导航容器
Drawer - 侧边抽屉导航
Modal - 模态框场景
Lightbox - 轻量级浮层场景

Router 配置详解

Router 是整个应用的路由容器，主要配置属性包括：

<Router
  sceneStyle={{ paddingTop: 60 }}  // 全局场景样式
  backAndroidHandler={() => {}}    // Android返回键自定义处理
  onStateChange={this.onStateChange} // 导航状态变化回调
>
  {/* 子场景 */}
</Router>

关键属性说明：

backAndroidHandler: 用于自定义 Android 设备的返回键行为
onStateChange: 导航状态变化时的回调函数，常用于状态管理
sceneStyle: 应用于所有场景的基础样式
wrapBy: 高阶组件包装函数，便于集成 MobX 等状态管理库

Scene 场景配置

Scene 是最基础的路由单元，每个场景必须设置唯一的 key：

<Scene 
  key="home"
  component={HomeScreen}
  title="首页"
  hideNavBar={false}
  initial
/>

核心属性分类

1. 导航控制属性

key: 唯一标识符，用于导航调用
initial: 标记为初始场景
type: 导航类型（push/replace/reset等）
back: 是否显示返回按钮

2. 导航栏样式

title: 导航栏标题
titleStyle: 标题样式
navigationBarStyle: 导航栏容器样式
navTransparent: 透明导航栏

3. 按钮配置

leftButtonImage: 左侧按钮图片
rightButtonImage: 右侧按钮图片
onLeft/onRight: 左右按钮点击回调

4. 生命周期

onEnter: 进入场景时触发
onExit: 离开场景时触发

Tabs 标签页导航

Tabs 组件用于创建底部或顶部标签栏导航：

<Tabs
  key="mainTabs"
  activeTintColor="red"
  inactiveTintColor="gray"
  tabBarPosition="bottom"
>
  <Scene key="tab1" title="Tab1" component={Tab1} />
  <Scene key="tab2" title="Tab2" component={Tab2} />
</Tabs>

重要属性

activeTintColor: 激活标签的颜色
inactiveTintColor: 未激活标签的颜色
tabBarPosition: 标签栏位置（top/bottom）
lazy: 是否延迟加载标签页
tabBarComponent: 自定义标签栏组件

自定义标签栏示例

const CustomTabBar = ({ navigation }) => {
  const { routes, index } = navigation.state;
  
  return (
    <View style={styles.tabContainer}>
      {routes.map((route, i) => (
        <TouchableOpacity
          key={route.key}
          style={[styles.tab, i === index && styles.activeTab]}
          onPress={() => Actions[route.key]()}
        >
          <Text>{route.key}</Text>
        </TouchableOpacity>
      ))}
    </View>
  );
};

Drawer 侧边抽屉

Drawer 用于创建侧滑菜单：

<Drawer
  key="drawer"
  drawerWidth={300}
  drawerPosition="left"
  contentComponent={CustomDrawerContent}
>
  <Scene key="main" component={MainScreen} />
</Drawer>

关键配置

drawerWidth: 抽屉宽度
drawerPosition: 抽屉位置（left/right）
contentComponent: 抽屉内容组件
hideDrawerButton: 是否隐藏抽屉按钮

Modal 与 Lightbox

Modal 模态框

Modal 用于创建从底部弹出的场景：

<Router>
  <Modal>
    <Scene key="root" component={RootScreen} />
    <Scene key="loginModal" component={LoginModal} />
  </Modal>
</Router>

Lightbox 轻量浮层

Lightbox 允许创建透明背景的浮层：

<Router>
  <Lightbox>
    <Scene key="root" component={RootScreen} />
    <Scene key="imagePreview" component={ImagePreview} />
  </Lightbox>
</Router>

Actions 导航操作

Actions 对象提供了丰富的导航方法：

// 基本导航
Actions.home(); // 跳转到home场景
Actions.pop(); // 返回上一页
Actions.replace('newScene'); // 替换当前场景

// 带参数导航
Actions.profile({ userId: 123 }); 

// 特殊操作
Actions.refresh({ param: 'updated' }); // 刷新当前场景
Actions.drawerOpen(); // 打开抽屉菜单

常用方法

基础导航
- push(key, params): 推入新场景
- pop(): 返回上一场景
- replace(key, params): 替换当前场景
特殊操作
- refresh(params): 刷新当前场景
- drawerOpen/drawerClose: 控制抽屉菜单
- back(): 等同于 pop()
场景参数获取
- currentScene: 当前场景名称
- currentParams: 当前场景参数