嘿伙計們，我遇到了一個小問題，我一直在為以下平臺構建測驗插件 [Web、電話、桌面]
我正在使用以下框架，
世博會
反應本機
反應原生導航
我的問題是在構建應用程式后在 PWA 構建上時，我遇到了一個問題，如果用戶想要直接導航到特定路徑或重繪 頁面，當在下面的示例 GIF 中明顯有效時，網站回傳 404。
-- Expo 開發工具：https : //gyazo.com/0abc4161810cb14e74543b3dcb854b49
-- 運行 expobuild:web之后，expo 完成構建我運行的 PWA 后npx serve web-build：https : //gyazo.com/ed699dcc4b13830647552b07ee112c62
我不確定我需要做什么添加的配置或什么？我一直在搜索我的問題，但找不到任何東西
如果有人可以提供幫助，那就是你們！！
補充說明 >>>
我沒有撰寫登錄系統或任何型別的兌現等代碼，這只是一個頁面的組件，其中有一個按鈕將用戶發送到頁面（組態檔）
應用程式.js
import LoginScreen from './views/login'
import ProfileScreen from './views/profile'
export default function App() {
return React.createElement(
(Platform.OS == 'web') ? web_navigator : mobile_navigator
);
}
function mobile_navigator() {
const Tab = createBottomTabNavigator();
return (
<NavigationContainer>
<Tab.Navigator
screenOptions={{
headerShown: false,
tabBarStyle: {
backgroundColor: "#242629",
borderTopWidth: 0
},
tabBarOptions: {
showLabel: false,
}
}}
>
<Tab.Screen name="Login" component={LoginScreen} />
<Tab.Screen name="Profile" component={ProfileScreen} />
</Tab.Navigator>
</NavigationContainer>
);
}
function web_navigator() {
const Stack = createStackNavigator();
return (
<NavigationContainer linking={{
config: {
screens: {
Login: "/",
Profile: "/Profile/:Username?"
}
},
}}>
<Stack.Navigator
screenOptions={{
headerShown: false
}}>
<Stack.Screen name="Login" component={LoginScreen} />
<Stack.Screen name="Profile" component={ProfileScreen} />
</Stack.Navigator>
</NavigationContainer>
);
}
登錄.js
const Login = ({navigation}) => {
const [userName, setUserName] = useState('');
const [userPassword, setUserPassword] = useState('');
return (
<View style={styles.Body} >
{Platform.OS === 'web' ?
<View style={styles.Body_left} >
<Image
source={require("../assets/LeftPanel3.png")}
style={styles.Body_left_Picture}
/>
</View>
: null}
<SafeAreaView style={styles.Body_right} >
<View style={styles.Body_Container} >
<Image
source={require("../assets/PlaceHolderLogo.png")}
style={styles.Logo}
/>
<Text h1 style={styles.Login_Title}>Let's Sign In</Text>
<Text style={styles.Login_Title_Child}>Welcome Back!</Text>
<View style={styles.Input_Group} >
<TextInput value={userName} placeholder={'Enter Username'} placeholderTextColor="#fff" onChangeText={(inputOne) => setUserName(inputOne)} style={styles.Input} />
<TextInput value={userPassword} placeholder={'Enter Password'} placeholderTextColor="#fff" onChangeText={(inputTwo) => setUserPassword(inputTwo)} style={styles.Input} />
<Pressable style={styles.Btn_Main} onPress={() => navigation.navigate("Profile", {Username: userName})}>
<Text style={styles.Btn_Text}>Sign In</Text>
</Pressable>
</View>
</View>
</SafeAreaView >
</View>
);
}
export default Login;
Profile.js
export default function App({route}) {
const Profile_Username = route.params ? route.params.Username : "UnKnown"
const Profile_Picture = "https://www.trickscity.com/wp-content/uploads/2019/02/pubg-dp.jpeg"
return (
<View style={{ position: 'relative', backgroundColor: "#242629", flex: 1 }} >
<View style={{ position: 'relative', backgroundColor: "#242629", flex: 0.3 }} ></View>
<View style={{ position: 'relative', backgroundColor: "#16161a", flex: 1 }} >
<View style={styles.ProfileParent} >
<View style={styles.ProfilePictureParent}>
<Image
source={{uri: Profile_Picture}}
style={styles.ProfilePicture}
/>
</View>
<View style={styles.ProfileTitleBox}>
<Text style={styles.ProfileName}>{Profile_Username}</Text>
<Text style={styles.ProfileTag}>Member</Text>
</View>
</View>
</View>
</View>
);
}
---[ PWA 檔案 ]---
服務.json
{
"headers": [
{
"source": "static/**/*.js",
"headers": [
{
"key": "Cache-Control",
"value": "public, max-age=31536000, immutable"
}
]
}
]
}
清單檔案
{
"background_color": "#ffffff",
"display": "standalone",
"lang": "en",
"name": "DevBuild",
"short_name": "DevBuild",
"start_url": "/?utm_source=web_app_manifest",
"orientation": "portrait",
"icons": [
{
"src": "\\pwa\\chrome-icon\\chrome-icon-144.png",
"sizes": "144x144",
"type": "image/png"
},
{
"src": "\\pwa\\chrome-icon\\chrome-icon-192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "\\pwa\\chrome-icon\\chrome-icon-512.png",
"sizes": "512x512",
"type": "image/png"
}
]
}
uj5u.com熱心網友回復：
解決方案
感謝@pfndesign
告訴我編輯 serve.json 以包含
"rewrites": [
{ "source": "/**", "destination": "/index.html"}
]
注意我不是 100% 確定它的作用，但它對我有用，
pfndesign 也將我與此聯系起來：https : //github.com/vercel/serve-handler#options
希望這可以幫助任何閱讀本文的人：D
uj5u.com熱心網友回復：
您的問題不是 expo 或 react-native，您需要在主機中使用 htaccess 將所有請求發送到您的 PWA 所在的 index.html 。第一次導航到 PWA 時，它將加載 index.html 并且每個路由都加載到該 HTML 檔案中，URL 地址欄根據您的鏈接配置更改，但是當您重繪 頁面主機時認為它必須轉到子檔案夾，因為它不知道您的路線不存在于您的 PWA 之外
只需在 PWA 檔案夾中創建一個 .htaccess 檔案并將此代碼添加到其中，它應該可以解決您的問題
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
RewriteRule ^ - [L]
RewriteRule ^ /index.html [L]
</IfModule>
為您的本地環境編輯 serve.json 并在下面添加代碼
"rewrites": [
{ "source": "/**", "destination": "/index.html" }
]
有關重寫的更多資訊，您可以查看https://github.com/vercel/serve-handler#options
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/338116.html