Solito项目指南：如何创建跨平台路由-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00818/article/details/148552650

Solito项目指南：如何创建跨平台路由

solito 🧍‍♂️ React Native + Next.js, unified. 项目地址: https://gitcode.com/gh_mirrors/so/solito

前言

在跨平台开发中，路由管理是一个核心问题。Solito作为一个优秀的跨平台解决方案，为React Native和Next.js提供了统一的路由管理方式。本文将详细介绍如何在Solito项目中创建新的路由，实现Web和Native端的无缝导航体验。

理解Solito的路由架构

Solito的核心思想是"一次编写，多端运行"。它通过以下方式实现跨平台路由：

共享组件层：所有页面组件都存放在共享目录中
平台适配层：Web端使用Next.js页面系统，Native端使用React Navigation
统一路由层：通过配置实现URL与Native屏幕的映射

创建新路由的完整步骤

第一步：创建共享屏幕组件

在packages/app/features/settings/screen.tsx中创建基础组件：

import { View, StyleSheet, Text } from 'react-native'

export function SettingsScreen() {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>设置页面</Text>
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#111',
  },
  text: {
    color: '#fff',
  },
})

这个组件将被Web和Native两端共享，注意它使用了React Native的原生组件，但也能在Web端正常工作，这得益于Solito的跨平台兼容层。

第二步：配置Next.js页面路由

对于Web端，我们需要在Next.js中创建对应的页面路由：

// apps/next/pages/settings.tsx
export { SettingsScreen as default } from 'app/features/settings/screen'

这种导出方式保持了Next.js的页面约定，同时复用了我们创建的共享组件。启动开发服务器后，访问/settings路径即可看到这个页面。

第三步：集成React Navigation

Native端使用React Navigation进行导航管理。我们需要在导航栈中添加新屏幕：

import { createNativeStackNavigator } from '@react-navigation/native-stack'
import { SettingsScreen } from '../../features/settings/screen'

const Stack = createNativeStackNavigator<{
  home: undefined
  settings: undefined
}>()

export function NativeNavigation() {
  return (
    <Stack.Navigator>
      <Stack.Screen
        name="settings"
        component={SettingsScreen}
        options={{ title: '设置' }}
      />
    </Stack.Navigator>
  )
}

关键点说明：

name属性定义了屏幕的唯一标识符
component属性指向我们创建的共享组件
类型定义确保了路由参数的类型安全

第四步：配置深度链接

为了让Native应用能响应URL导航，需要配置React Navigation的linking：

import { NavigationContainer } from '@react-navigation/native'
import * as Linking from 'expo-linking'

export function NavigationProvider({ children }) {
  return (
    <NavigationContainer
      linking={{
        prefixes: [Linking.createURL('/')],
        config: {
          screens: {
            settings: 'settings',
          },
        },
      }}
    >
      {children}
    </NavigationContainer>
  )
}

配置说明：

prefixes定义了应用能处理的URL前缀
screens对象建立了屏幕名称与URL路径的映射关系
这种配置使得/settingsURL能正确导航到Native端的设置页面

进阶技巧

跨平台导航实现

Solito提供了统一的导航API，可以在共享组件中使用：

import { useRouter } from 'solito/router'

function MyComponent() {
  const router = useRouter()
  
  const navigateToSettings = () => {
    router.push('/settings')
  }
  
  return <Button onPress={navigateToSettings} />
}

这种写法在Web和Native端都能正常工作，底层会自动选择适合当前平台的导航实现。

路由参数处理

对于带参数的路由，如用户详情页，可以这样配置：

// 类型定义
const Stack = createNativeStackNavigator<{
  'user-detail': { id: string }
}>()

// 链接配置
{
  screens: {
    'user-detail': 'user/:id'
  }
}

在组件中可以通过路由Hook获取参数：

import { useParam } from 'solito'

function UserDetailScreen() {
  const id = useParam('id')
  // ...
}

常见问题解答

Q：为什么我的Native端路由不工作？ A：请检查：

是否正确配置了linking
屏幕名称是否拼写一致
是否添加了正确的URL前缀

Q：如何自定义Web和Native端的不同表现？ A：可以在共享组件中使用平台判断：

import { Platform } from 'react-native'

function MyComponent() {
  return Platform.select({
    web: <WebSpecificUI />,
    default: <NativeSpecificUI />
  })
}