怎样做企业官方网站,电商app开发哪家公司最好,精神文明地方联盟网站建设,在线a视频网站一级a做片过去开发React Native#xff0c;所使用的路由都是React Navigation。但是这个东西使用起来非常困难#xff0c;配置无比繁琐。Expo#xff0c;为了简化操作#xff0c;就基于React Navigation开发了Expo Router。
Expo Router用起来就要简单的多了#xff0c;配置也相对…过去开发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);
}
