英文:
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
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: '*',
},
}
};
英文:
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: '*',
},
}
};
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论