英文:
Deploy Expo React Native Web app to a subfolder
问题
我尝试在移动应用程序部署到子文件夹的 Web 服务器上时也使其正常工作。
我正在尝试使用 Expo 及其 create-expo-app 样板来创建一个通用应用程序（原生设备和 Web），该样板使用 React Native 和 React Native for Web。
当我部署到我的 Web 服务器时，它不会在根目录中，而是在一个子文件夹中。当我构建（npx expo build:web），上传到服务器并浏览到 https://<myserver>/subfolder 时，我收到一条消息 This screen doesn't exist。有一个链接 Go to home screen!，它会更改浏览器的 URL，删除 subfolder。应用程序功能正常，但 URL 不包括 subfolder。因此，这是一个路由/链接问题。
我已经在我的 package.json 中添加了一个属性：
"homepage": "/subfolder",
我已经在其他地方看到，<Router> 或 <BrowserRouter> 可以添加一个属性，比如 basename={'subfolder'}，但是在 Expo 和 React Native 中，没有 Router/BrowserRouter 组件。这个样板似乎使用了完全不同的范例，使用了 @react-navigation/native 中的 NavigationContainer。
编辑： 一个重现这个问题的简单方法是运行 create-expo-app，然后在 package.json 中将 homepage 设置为 /web-build/。运行 npx expo export:web 来填充 web-build 文件夹，然后运行 npx serve 或 py -m http.server 或其他一些轻量级的 Web 服务器在当前文件夹中。浏览到 http://localhost:port/web-build/ 会产生我描述的行为。
英文:
How can I have my mobile app also work when deployed to a web server in a subfolder?
I'm trying to create a universal app (native devices and web) using Expo and its create-expo-app boilerplate, which uses React Native and React Native for Web.
When I deploy to my web server, it will not be in the root, rather in a subfolder. When I build (npx expo build:web), upload to my server, and browse to https://<myserver>/subfolder I get a message This screen doesn't exist. There is a link to Go to home screen! which changes the browser URL, removing subfolder. The app functions correctly, but the URL does not include subfolder. Thus, this is a routing/linking issue.
I've added a property to my package.json:
"homepage": "/subfolder",
I have seen elsewhere that <Router> or <BrowserRouter> can be given an attribute like basename={'subfolder'}, but with Expo and React Native there is no Router/BrowserRouter component. The boilerplate seems to use a completely different paradigm with NavigationContainer from @react-navigation/native.
Edit: An easy way to reproduce this is to run create-expo-app, then set homepage to /web-build/ in package.json. Run npx expo export:web which populates the web-build folder, then run npx serve or py -m http.server or some other lightweight web server in the current folder. Browsing to http://localhost:port/web-build/ yields the behavior I described.
答案1
得分: 0
Sure, here's the translation of the code-related content:
首先，在 package.json 中将 homepage 属性更改为一个点（即 "homepage": "."）。这使文件引用相对于当前目录。有人争论不应该这样做，但似乎有效。
其次，在定义屏幕的地方，使用一个变量来表示根路径。例如：
import { Platform } from 'react-native';
var baseURL = '';
if (Platform.OS === 'web') baseURL = '/subfolder';
const linking: LinkingOptions<RootStackParamList> = {
prefixes: [Linking.createURL('/')],
config: {
screens: {
Root: {
path: baseURL, // <- 此行已添加
screens: {
TabOne: {
screens: {
TabOneScreen: 'one',
},
},
TabTwo: {
screens: {
TabTwoScreen: 'two',
},
},
},
},
Modal: 'modal',
NotFound: '*',
},
}
};
Please note that I've translated the code, and you should still use the original code for your development needs.
英文:
I have a two-part solution, but I still don't know if this is the canonical way it should be done.
First, in package.json change the homepage property to just a dot (i.e. "homepage": "."). This makes file references relative to the current directory. I've seen some people argue against doing this, but it seems to work.
Second, where your screens are defined use a variable for the root path. For example:
import { Platform } from 'react-native';
var baseURL = '';
if (Platform.OS == 'web') baseURL = '/subfolder';
const linking: LinkingOptions<RootStackParamList> = {
prefixes: [Linking.createURL('/')],
config: {
screens: {
Root: {
path: baseURL, // <- This line was added
screens: {
TabOne: {
screens: {
TabOneScreen: 'one',
},
},
TabTwo: {
screens: {
TabTwoScreen: 'two',
},
},
},
},
Modal: 'modal',
NotFound: '*',
},
}
};
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论