過去開發React Native，所使用的路由都是React Navigation。但是這個東西使用起來非常困難，配置無比繁瑣。Expo，為了簡化操作，就基于React Navigation開發了Expo Router。
Expo Router用起來就要簡單的多了，配置也相對容易很多很多。
不過因為Expo Router的底層還是React Navigation，所以也有很多些時候，我們會去React Navigation官方文檔里找一些需要的配置。
使用 create-expo-app 創建一個新的 Expo 應用程序，默認已經安裝和配置 Expo Router 。
如果我們手動安裝路由，需要先安裝依賴：
npx expo install expo-router react-native-safe-area-context react-native-screens expo-linking expo-constants expo-status-bar
然后打開package.json，將main這里，修改成：
{"main" : "expo-router/entry"
}
這里是項目的入口配置，要改到expo-router里面。
之前使用的入口文件是根目錄的index.js，但現在由路由來接管了，所以這些文件現在就沒有用了，我們可以直接刪除。找到項目根目錄的index.js和App.js，這兩個文件直接刪掉。
在根目錄里，新建一個app目錄，里面再新建一個index.js。剛才配置完成后，項目的入口，會自動變成app/index.js文件。
我們在里面隨便放點內容：
import { StyleSheet, Text, View } from 'react-native';export default function App() {return (<View style={styles.container}><Text style={styles.title}>這是一個新的入口！</Text></View>);
}const styles = StyleSheet.create({container: {flex: 1,backgroundColor: '#fff',alignItems: 'center',justifyContent: 'center',},title: {fontSize: 50,width: 200,fontWeight: 'bold',color: '#e29447',}
});
重新啟動下項目，運行：
npx expo start
還可以打開根目錄的app.json文件，這里是App的一些配置。在 expo 屬性里面增加上scheme 配置：
{"expo" : {//..."scheme" : "heo-app",}
}
這個配置叫做深度鏈接，當這么配置了以后，將來可以通過這種地址：
heo-app://react-native
從別的應用，或者瀏覽器，可以直接跳轉到App里的對應頁面來。
如果你和我現在版本一樣：
{"name": "expo-learn","version": "1.0.0","main": "expo-router/entry","scripts": {"start": "expo start","android": "expo start --android","ios": "expo start --ios","web": "expo start --web"},"dependencies": {"expo": "~53.0.17","expo-status-bar": "~2.2.3","react": "19.0.0","react-native": "0.79.5","urlcat": "^3.1.0","expo-router": "~5.1.3","react-native-safe-area-context": "5.4.0","react-native-screens": "~4.11.1","expo-linking": "~7.1.7","expo-constants": "~17.1.7"},"devDependencies": {"@babel/core": "^7.20.0"},"private": true
}
那么按照如上操作會產生一個報錯：
ERROR Warning: Invalid prop `style` supplied to `React.Fragment`. React.Fragment can only have `key` and `children` props.
解決方案如下：
https://stackoverflow.com/questions/79683994/invalid-prop-style-supplied-to-react-fragment-react-fragment-can-only-have
要解決此問題，請轉到 node_modules/expo-router/build/views/Navigator.js 并找到 DefaultNavigator() 函數（位于文件末尾附近）。問題就是從那里產生的。
請用以下代碼替換該函數：
function DefaultNavigator() {// iOS needs flex: 1 style for proper layoutconst isIOS = process.env.EXPO_OS === 'ios';return (<SlotNavigatorWrapper {...(isIOS ? { style: { flex: 1 } } : {})}><SlotNavigator /></SlotNavigatorWrapper>);
}
