https:\/\/oblador.github.io\/react-native-vector-icons\/<\/a><\/p>\n\n\n\n\/\/ src\/navigation\/Router.tsx\r\nimport React from 'react';\r\nimport {createStackNavigator} from '@react-navigation\/stack';\r\nimport {createBottomTabNavigator} from '@react-navigation\/bottom-tabs';\r\nimport {Ionicons} from '@expo\/vector-icons'; \/\/ \u5bfc\u5165\u56fe\u6807\u5e93\r\nimport HomeScreen from '..\/screens\/HomeScreen';\r\nimport DetailsScreen from '..\/screens\/DetailsScreen';\r\nimport AnotherScreen from '..\/screens\/AnotherScreen';\r\nimport LifeScreen from '..\/screens\/LifeScreen';\r\nimport AlbumScreen from '..\/screens\/AlbumScreen';\r\nimport HighlightScreen from '..\/screens\/HighlightScreen';\r\nimport {View} from \"react-native\";\r\n\r\nconst Stack = createStackNavigator();\r\nconst Tab = createBottomTabNavigator();\r\n\r\nfunction HomeStack() {\r\n return (\r\n <Stack.Navigator initialRouteName=\"Home\">\r\n {\/*\u9690\u85cf\u6807\u9898*\/}\r\n <Stack.Screen name=\"Home\" component={HomeScreen} options={{headerShown: false}}\/>\r\n <Stack.Screen name=\"Details\" component={DetailsScreen}\/>\r\n <\/Stack.Navigator>\r\n );\r\n}\r\n\r\nexport default function Router() {\r\n return (\r\n <Tab.Navigator>\r\n <Tab.Screen\r\n name=\"\u9996\u9875\"\r\n component={HomeStack}\r\n options={{\r\n tabBarIcon: ({color, size}) => (\r\n <Ionicons name=\"home\" color={color} size={size}\/>\r\n ),\r\n }}\r\n \/>\r\n <Tab.Screen\r\n name=\"\u52a8\u6001\"\r\n component={LifeScreen}\r\n options={{\r\n tabBarIcon: ({color, size}) => (\r\n <Ionicons name=\"md-pulse\" color={color} size={size}\/>\r\n ),\r\n }}\r\n \/>\r\n <Tab.Screen\r\n name=\"Another\"\r\n component={AnotherScreen}\r\n options={{\r\n tabBarIcon: () => (\r\n <Ionicons name=\"add-circle\" color=\"#fb4a3e\" size={40}\/>\r\n ),\r\n tabBarLabel: () => null, \/\/ \u9690\u85cf\u6807\u7b7e\u540d\u5b57\r\n }}\r\n \/>\r\n <Tab.Screen\r\n name=\"\u56fe\u5e93\"\r\n component={AlbumScreen}\r\n options={{\r\n tabBarIcon: ({color, size}) => (\r\n <Ionicons name=\"images\" color={color} size={size}\/>\r\n ),\r\n }}\r\n \/>\r\n <Tab.Screen name=\"\u4e2a\u4eba\" component={HighlightScreen}\r\n options={{\r\n tabBarIcon: ({color, size}) => (\r\n <Ionicons name=\"person\" color={color} size={size}\/>\r\n ),\r\n }}\r\n \/>\r\n <\/Tab.Navigator>\r\n );\r\n}\r\n<\/code><\/pre>\n\n\n\n\u521d\u6b65\u8bbe\u8ba1<\/p>\n\n\n\n<\/div><\/figure>\n\n\n\n
\u9875\u9762\u8bbe\u8ba1<\/h2>\n\n\n\n1. \u8bbe\u8ba1\u4e0a\u4f20\u9875\u9762<\/strong><\/h3>\n\n\n\n\u5e93expo install expo-image-picker<\/p>\n\n\n\n
\u9009\u62e9\u56fe\u7247<\/p>\n\n\n\n
\/\/ src\/screens\/AnotherScreen.tsx\nimport React, { useEffect, useState } from 'react';\nimport { Button, Image, View } from 'react-native';\nimport * as ImagePicker from 'expo-image-picker';\nimport { useNavigation } from '@react-navigation\/native';\n\nexport default function AnotherScreen() {\n const [imageUri, setImageUri] = useState(null);\n const navigation = useNavigation();\n\n const takePhoto = async () => {\n let result = await ImagePicker.launchCameraAsync({\n mediaTypes: ImagePicker.MediaTypeOptions.All,\n allowsEditing: true,\n aspect: [4, 3],\n quality: 1,\n });\n\n if (!result.canceled) {\n setImageUri(result.assets[0].uri);\n navigation.navigate('PostScreen', { imageUri: result.assets[0].uri }); \/\/ replace 'NextScreen' with the name of your next screen\n }\n };\n const pickImage = async () => {\n let result = await ImagePicker.launchImageLibraryAsync({\n mediaTypes: ImagePicker.MediaTypeOptions.All,\n allowsEditing: true,\n aspect: [4, 3],\n quality: 1,\n });\n\n if (!result.canceled) {\n setImageUri(result.assets[0].uri);\n navigation.navigate('PostScreen', { imageUri: result.assets[0].uri }); \/\/ replace 'NextScreen' with the name of your next screen\n }\n };\n\n useEffect(() => {\n pickImage();\n }, []);\n\n return (\n <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>\n <Button title=\"\u9009\u62e9\u56fe\u7247\" onPress={pickImage} \/>\n <Button title=\"\u62cd\u7167\" onPress={takePhoto} \/>\n {imageUri && <Image source={{ uri: imageUri }} style={{ width: 200, height: 200 }} \/>}\n <\/View>\n );\n}\n<\/code><\/pre>\n\n\n\n2. \u53d1\u5e03\u52a8\u6001\u9875\u9762<\/h3>\n\n\n\n \u914d\u7f6e\u8bf7\u6c42api<\/p>\n\n\n\n
\u4f7f\u7528axios<\/p>\n\n\n\n
cnpm install axios<\/code><\/p>\n\n\n\n\u9996\u5148\u8bbe\u8ba1\u767b\u5f55\u9875\u9762\uff0c\u6ca1\u6709\u767b\u5f55\u7684\u65f6\u5019\u4e0d\u80fd\u53d1\u5e03\u52a8\u6001\uff0c\u5148\u8df3\u8f6c\u5230\u767b\u5f55\u9875\u9762<\/p>\n\n\n\n
\u6e05\u9664\u4f9d\u8d56\u91cd\u65b0\u4e0b\u8f7d<\/p>\n\n\n\n
expo start –clear<\/p>\n\n\n\n
\u4f7f\u7528asiox<\/p>\n\n\n\n
\u8bf7\u6c42\u62e6\u622a\u5668<\/p>\n\n\n\n
import axios from 'axios'; <\/code><\/p>\n\n\n\nimport axios from 'axios';\nimport AsyncStorage from '@react-native-async-storage\/async-storage';\n\n\/\/ \u521b\u5efa axios \u5b9e\u4f8b\nconst service = axios.create({\n baseURL: 'http:\/\/localhost:8080',\n timeout: 10000 \/\/ \u8bf7\u6c42\u8d85\u65f6\u65f6\u95f4\n});\n\n\/\/ \u8bf7\u6c42\u62e6\u622a\u5668\nservice.interceptors.request.use(\n async config => {\n \/\/ \u5728\u8fd9\u91cc\u53ef\u4ee5\u505a\u4e00\u4e9b\u8bf7\u6c42\u524d\u7684\u64cd\u4f5c\n \/*\n * \u8bbe\u7f6e\u5168\u5c40token\n * *\/\n \/\/ console.log(config,\"\u8bf7\u6c42\u62e6\u622a\u5668config\");\n let token = await AsyncStorage.getItem('token');\n console.log(token,\"token\")\n if (token) {\n config.headers['Authorization'] = `Bearer ${token}`;\n }\n console.log(service.defaults.baseURL + config.url, \"config\");\n return config;\n },\n error => {\n \/\/ \u5904\u7406\u8bf7\u6c42\u9519\u8bef\n console.log(error,\"\u8bf7\u6c42\u62e6\u622a\u5668\"); \/\/ for debug\n\n return Promise.reject(error);\n }\n);\n\n\/\/ \u54cd\u5e94\u62e6\u622a\u5668\nservice.interceptors.response.use(\n async response => {\n \/\/ \u5728\u8fd9\u91cc\u53ef\u4ee5\u505a\u4e00\u4e9b\u54cd\u5e94\u6570\u636e\u7684\u64cd\u4f5c\n console.log(response,\"\u54cd\u5e94\u62e6\u622a\u5668response\")\n if (response.data && response.data.code === 40101) {\n \/\/ \u5982\u679c\u8fd4\u56de\u7684\u72b6\u6001\u7801\u4e3a40101\uff0c\u8bf4\u660etoken\u8fc7\u671f\uff0c\u6e05\u9664token\u5e76\u8df3\u8f6c\u5230\u767b\u5f55\u9875\u9762\n await AsyncStorage.removeItem('token');\n\n }\n \/\/ \u5982\u679c\u8bf7\u6c42\u7684 URL \u5305\u542b '\/students\/export\/', \u5219\u8fd4\u56de\u6574\u4e2a\u54cd\u5e94\u5bf9\u8c61\n if (response.config.url?.includes('\/students\/export\/')) {\n return response;\n }\n return response.data;\n },\n error => {\n \/\/ \u5904\u7406\u54cd\u5e94\u9519\u8bef\n console.log(error,\"\u54cd\u5e94\u62e6\u622a\u5668\"); \/\/ for debug\n \/\/ console.log(error.message); \/\/ \u6253\u5370\u9519\u8bef\u4fe1\u606f\n \/\/ console.log(error.request); \/\/ \u6253\u5370\u8bf7\u6c42\u5bf9\u8c61\n return Promise.reject(error);\n }\n);\n\nexport default service;\n<\/code><\/pre>\n\n\n\n\u767b\u5f55\u63a5\u53e3<\/p>\n\n\n\n
import service from '.\/api';\nimport AsyncStorage from '@react-native-async-storage\/async-storage';\n\nexport const userLogin = async (userAccount: string, userPassword: string) => {\n let data = {\n userAccount: userAccount,\n userPassword: userPassword\n };\n\n try {\n let response = await service.post('\/api\/user\/login', data);\n\n if (response.data.code === 200) {\n \/\/ \u8bf7\u6c42\u6210\u529f\n console.log('Login success!');\n let token = response.data.data.token; \/\/ \u83b7\u53d6token\n let refreshToken = response.data.data.refreshToken; \/\/ \u83b7\u53d6refreshToken\n await AsyncStorage.setItem('token', token);\n await AsyncStorage.setItem('refreshToken', refreshToken);\n } else {\n \/\/ \u8bf7\u6c42\u5931\u8d25\n console.log('Login failed!');\n }\n } catch (error) {\n console.error(error);\n }\n};\n\nexport const sendSms = async (code: string, message: string, phoneNumber: string) => {\n let data = {\n code: code,\n message: message,\n phoneNumber: phoneNumber\n };\n\n try {\n let response = await service.post('\/api\/user\/sendSms', data);\n\n if (response.data.code === 200) {\n \/\/ \u8bf7\u6c42\u6210\u529f\n console.log('SMS sent successfully!');\n } else {\n \/\/ \u8bf7\u6c42\u5931\u8d25\n console.log('SMS sending failed!');\n }\n } catch (error) {\n console.error(error);\n }\n};\n\nexport const phoneLogin = async (code: string, message: string, phoneNumber: string) => {\n let data = {\n code: code,\n message: message,\n phoneNumber: phoneNumber\n };\n\n try {\n let response = await service.post('\/api\/user\/phoneLogin', data);\n\n if (response.data.code === 200) {\n \/\/ \u8bf7\u6c42\u6210\u529f\n console.log('Phone login success!');\n let token = response.data.data.token; \/\/ \u83b7\u53d6token\n let refreshToken = response.data.data.refreshToken; \/\/ \u83b7\u53d6refreshToken\n await AsyncStorage.setItem('token', token);\n await AsyncStorage.setItem('refreshToken', refreshToken);\n } else {\n \/\/ \u8bf7\u6c42\u5931\u8d25\n console.log('Phone login failed!');\n }\n } catch (error) {\n console.error(error);\n }\n};\n\nexport const uploadPhoto = async (imageUri: string) => {\n let data = new FormData();\n data.append('photo', {\n uri: imageUri,\n type: 'image\/jpeg',\n name: 'photo.jpg'\n });\n\n try {\n let response = await service.post('\/api\/photoAlbum\/upload', data, {\n headers: {\n 'Content-Type': 'multipart\/form-data',\n },\n });\n\n if (response.data.code === 200) {\n \/\/ \u8bf7\u6c42\u6210\u529f\n console.log('Upload success!');\n } else {\n \/\/ \u8bf7\u6c42\u5931\u8d25\n console.log('Upload failed!');\n }\n } catch (error) {\n console.error(error);\n }\n};\n\nexport const savePhotoToAlbum = async (photoId: string, albumId: string) => {\n let data = {\n photoId: photoId,\n albumId: albumId\n };\n\n try {\n let response = await service.post('\/api\/photoAlbum\/save', data);\n\n if (response.data.code === 200) {\n \/\/ \u8bf7\u6c42\u6210\u529f\n console.log('Save success!');\n } else {\n \/\/ \u8bf7\u6c42\u5931\u8d25\n console.log('Save failed!');\n }\n } catch (error) {\n console.error(error);\n }\n};\n<\/code><\/pre>\n\n\n\n\u767b\u5f55<\/p>\n\n\n\n
import React, {useState} from 'react';\nimport {Button, Text, TextInput, View, StyleSheet,TouchableOpacity} from 'react-native';\nimport {phoneLogin, sendSms, userLogin} from '..\/utils\/login';\nimport { useNavigation } from '@react-navigation\/native';\nexport default function LoginScreen() {\n const [userAccount, setUserAccount] = useState('');\n const [userPassword, setUserPassword] = useState('');\n const [phoneNumber, setPhoneNumber] = useState('');\n const [code, setCode] = useState('');\n const [error, setError] = useState<string | null>(null);\n const [loginMethod, setLoginMethod] = useState('username');\n const navigation = useNavigation();\n const [countdown, setCountdown] = useState(0);\n React.useEffect(() => {\n navigation.setOptions({\n headerRight: () => (\n <TouchableOpacity onPress={() => setLoginMethod(loginMethod === 'username' ? 'phone' : 'username')}>\n <Text style={{ marginRight: 10, color: '#000', fontSize: 16 }}>\n {loginMethod === 'username' ? '\u624b\u673a\u53f7\u767b\u5f55' : '\u7528\u6237\u540d\u767b\u5f55'}\n <\/Text>\n <\/TouchableOpacity>\n ),\n });\n }, [navigation, loginMethod]);\n const handleLogin = async () => {\n if (!userAccount || !userPassword) {\n setError('\u7528\u6237\u540d\u548c\u5bc6\u7801\u4e0d\u80fd\u4e3a\u7a7a');\n return;\n }\n\n try {\n await userLogin(userAccount, userPassword);\n } catch (err) {\n setError((err as Error).message);\n }\n };\n\n const handleSendSms = async () => {\n if (!phoneNumber) {\n setError('\u624b\u673a\u53f7\u4e0d\u80fd\u4e3a\u7a7a');\n return;\n }\n\n try {\n await sendSms(code, '\u767b\u5f55\u77ed\u4fe1', phoneNumber);\n } catch (err) {\n setError((err as Error).message);\n }\n React.useEffect(() => {\n if (countdown > 0) {\n const timerId = setTimeout(() => {\n setCountdown(countdown - 1);\n }, 1000);\n return () => clearTimeout(timerId); \/\/ \u6e05\u9664\u5b9a\u65f6\u5668\n }\n }, [countdown]);\n };\n\n const handlePhoneLogin = async () => {\n if (!phoneNumber || !code) {\n setError('\u624b\u673a\u53f7\u548c\u9a8c\u8bc1\u7801\u4e0d\u80fd\u4e3a\u7a7a');\n return;\n }\n\n try {\n await phoneLogin(code, '', phoneNumber);\n } catch (err) {\n setError((err as Error).message);\n }\n };\n return (\n <View style={styles.container}>\n {\/* <Button title={loginMethod === 'username' ? '\u624b\u673a\u53f7\u767b\u5f55' : '\u7528\u6237\u540d\u767b\u5f55'} onPress={() => setLoginMethod(loginMethod === 'username' ? 'phone' : 'username')} \/> *\/}\n {loginMethod === 'username' ? (\n <View style={styles.inputContainer}>\n <TextInput\n style={styles.input}\n placeholder=\"\u7528\u6237\u540d\"\n value={userAccount}\n onChangeText={(text) => setUserAccount(text)}\n \/>\n <TextInput\n style={styles.input}\n placeholder=\"\u5bc6\u7801\"\n value={userPassword}\n onChangeText={(text) => setUserPassword(text)}\n secureTextEntry={true}\n \/>\n <View style={styles.button}>\n <Button title=\"\u767b\u5f55\" onPress={handleLogin} color=\"#FFFFFF\" \/>\n <\/View>\n <\/View>\n ) : (\n <View style={styles.inputContainer}>\n <View style={styles.inputWithButton}>\n <TextInput\n style={styles.input}\n placeholder=\"\u624b\u673a\u53f7\"\n value={phoneNumber}\n onChangeText={(text) => setPhoneNumber(text)}\n maxLength={11}\n \/>\n <TouchableOpacity \n style={styles.codeButton} \n onPress={handleSendSms}\n disabled={countdown > 0} \/\/ \u5f53\u5012\u8ba1\u65f6\u65f6\uff0c\u7981\u7528\u6309\u94ae\n >\n <Text style={styles.codeButtonText}>\n {countdown > 0 ? `${countdown}\u79d2\u540e\u91cd\u53d1` : '\u53d1\u9001\u9a8c\u8bc1\u7801'}\n <\/Text>\n <\/TouchableOpacity>\n <\/View>\n <TextInput\n style={styles.input}\n placeholder=\"\u9a8c\u8bc1\u7801\"\n value={code}\n onChangeText={(text) => setCode(text)}\n \/>\n <View style={styles.button}>\n <Button title=\"\u767b\u5f55\" onPress={handlePhoneLogin} color=\"#FFFFFF\" \/>\n <\/View>\n <\/View>\n )}\n {error && <Text style={{color: 'red'}}>{error}<\/Text>}\n <\/View>\n );\n}\n\nconst styles = StyleSheet.create({\n container: {\n flex: 1,\n justifyContent: 'center',\n padding: 20,\n backgroundColor: '#F4F5F7',\n },\n inputContainer: {\n marginBottom: 20,\n },\n input: {\n height: 50,\n borderColor: '#FB7299',\n borderWidth: 1,\n marginBottom: 10,\n paddingLeft: 10,\n borderRadius: 10,\n backgroundColor: '#FFFFFF',\n },\n button: {\n marginTop: 10,\n backgroundColor: '#FB7299',\n justifyContent: 'center',\n alignItems: 'center',\n padding: 10,\n borderRadius: 10,\n },\n row: {\n flexDirection: 'row',\n },\n flex: {\n flex: 1,\n },\n flex2: {\n flex: 2,\n \/\/ width:30\n },\n inputWithButton: {\n position: 'relative',\n },\n codeButton: {\n position: 'absolute',\n right: 10,\n \/\/ top: '50%',\n height:40,\n transform: [{ translateY: 5 }],\n backgroundColor: '#FB7299',\n padding: 10,\n borderRadius: 10,\n },\n codeContainer: {\n flexDirection: 'row',\n marginBottom: 10,\n },\n codeButtonText: {\n color: '#FFFFFF',\n },\n});\n<\/code><\/pre>\n\n\n\n\u8def\u7531<\/p>\n\n\n\n
\/\/ src\/navigation\/Router.tsx\nimport React, {useEffect} from 'react';\nimport {createStackNavigator} from '@react-navigation\/stack';\nimport {createBottomTabNavigator} from '@react-navigation\/bottom-tabs';\nimport {Ionicons} from '@expo\/vector-icons'; \/\/ \u5bfc\u5165\u56fe\u6807\u5e93\nimport HomeScreen from '..\/screens\/HomeScreen';\nimport DetailsScreen from '..\/screens\/DetailsScreen';\nimport PhotoPickerStack from '..\/screens\/PhotoPickerStack';\nimport LifeScreen from '..\/screens\/LifeScreen';\nimport AlbumScreen from '..\/screens\/AlbumScreen';\nimport HighlightScreen from '..\/screens\/HighlightScreen';\nimport PostScreen from \"..\/screens\/PostScreen\";\nimport {HeaderBackButton} from '@react-navigation\/elements';\nimport {StackActions, useNavigation} from '@react-navigation\/native';\nimport LoginScreen from '..\/screens\/LoginScreen';\nimport AsyncStorage from '@react-native-async-storage\/async-storage';\nimport {Text} from 'react-native';\n\ntype StackParamList = {\n Home: undefined;\n Details: undefined;\n PhotoPickerStack: undefined;\n PostScreen: { imageUri: string };\n Login: undefined;\n MainTabs: undefined;\n};\n\nconst Stack = createStackNavigator<StackParamList>();\nconst Tab = createBottomTabNavigator();\n\nfunction HomeStack() {\n return (\n <Stack.Navigator initialRouteName=\"Home\">\n <Stack.Screen\n name=\"Home\"\n component={HomeScreen}\n options={{ headerShown: false,title: '\u9996\u9875' }}\n\n \/>\n <\/Stack.Navigator>\n );\n}\n\nfunction PhotoPicker() {\n const navigation = useNavigation();\n useEffect(() => {\n const unsubscribe = navigation.addListener('focus', async () => {\n const token = await AsyncStorage.getItem('token');\n if (!token) {\n navigation.dispatch(StackActions.push('Login'));\n }\n });\n return unsubscribe;\n }, [navigation]);\n return (\n <Stack.Navigator initialRouteName=\"PhotoPickerStack\" >\n <Stack.Screen\n name=\"PhotoPickerStack\"\n component={PhotoPickerStack}\n options={{ headerShown: false }}\n \/>\n <Stack.Screen\n name=\"PostScreen\"\n component={PostScreen}\n options={({ navigation }) => ({\n headerStyle: {\n backgroundColor: '#f4511e',\n },\n headerTintColor: '#fff',\n headerTitleStyle: {\n fontWeight: 'bold',\n },\n headerLeft: (props) => (\n <HeaderBackButton\n {...props}\n onPress={() => {\n navigation.goBack();\n }}\n \/>\n ),\n })}\n \/>\n <\/Stack.Navigator>\n );\n}\nfunction OtherScreens() {\n return (\n <Stack.Navigator initialRouteName=\"Details\">\n <Stack.Screen\n name=\"Details\"\n component={DetailsScreen}\n options={{\n title: 'Details',\n headerShown: false\n }}\n \/>\n <\/Stack.Navigator>\n );\n}\n\nfunction MainTabs() {\n return (\n <Tab.Navigator>\n <Tab.Screen\n name=\"\u9996\u9875\"\n component={HomeStack}\n options={({route})=>\n ({\n tabBarIcon: ({ color, size }) => (\n <Ionicons name=\"home\" color={color} size={size} \/>\n ),\n })\n }\n \/>\n <Tab.Screen\n name=\"\u52a8\u6001\"\n component={LifeScreen}\n options={{\n tabBarIcon: ({ color, size }) => (\n <Ionicons name=\"md-pulse\" color={color} size={size} \/>\n ),\n }}\n \/>\n <Tab.Screen\n name=\"\u53d1\u5e03\"\n component={PhotoPicker}\n options={({ route }) => ({\n tabBarIcon: () => (\n <Ionicons name=\"add-circle\" color=\"#fb4a3e\" size={40} \/>\n ),\n tabBarLabel: () => null,\n \/\/ title: '',\n })}\n \/>\n <Tab.Screen\n name=\"\u56fe\u5e93\"\n component={AlbumScreen}\n options={{\n tabBarIcon: ({ color, size }) => (\n <Ionicons name=\"images\" color={color} size={size} \/>\n ),\n }}\n \/>\n <Tab.Screen name=\"\u4e2a\u4eba\" component={HighlightScreen}\n options={{\n tabBarIcon: ({ color, size }) => (\n <Ionicons name=\"person\" color={color} size={size} \/>\n ),\n }}\n \/>\n <\/Tab.Navigator>\n );\n}\nfunction Login() {\n const navigation = useNavigation();\n return (\n <Stack.Navigator initialRouteName=\"Login\" >\n <Stack.Screen\n name=\"Login\"\n component={LoginScreen}\n options={{\n title: '\u767b\u5f55',\n headerLeft: (props) => (\n <HeaderBackButton\n {...props}\n backImage={() => <Ionicons name=\"close\" size={24} color=\"black\" \/>}\n onPress={async () => {\n \/\/ \u5728\u767b\u5f55\u9875\u9762\u7684\u8fd4\u56de\u6309\u94ae\u7684 onPress \u4e8b\u4ef6\u4e2d\uff0c\u83b7\u53d6\u4fdd\u5b58\u7684\u8def\u7531\u4fe1\u606f\uff0c\u5e76\u8df3\u8f6c\u5230\u8be5\u8def\u7531\n const lastRouteName = await AsyncStorage.getItem('lastRouteName');\n navigation.navigate(\"Home\");\n }}\n \/>\n ),\n headerRight: () => (\n <Text style={{ marginRight: 10, color: '#000', fontSize: 16 }}>\u767b\u5f55<\/Text>\n ),\n }}\n \/>\n <\/Stack.Navigator>\n );\n}\nexport default function Router() {\n return (\n <Stack.Navigator>\n <Stack.Screen\n name=\"MainTabs\"\n component={MainTabs}\n options={{ headerShown: false }}\n \/>\n <Stack.Screen\n name=\"Details\"\n component={OtherScreens}\n \/>\n <Stack.Screen\n name=\"Login\"\n component={Login}\n options={{ headerShown: false }}\n \/>\n <\/Stack.Navigator>\n );\n}\n<\/code><\/pre>\n\n\n\n\u53d1\u5e03\u9875\u9762<\/p>\n\n\n\n
\u9700\u8981\u5b89\u88c5\u5e93\u6765\u663e\u793a\u8f93\u5165\u6846<\/p>\n\n\n\n
expo install react-native-keyboard-aware-scroll-view<\/p>\n\n\n\n
\u5b8c\u6574\u4ee3\u7801<\/p>\n\n\n\n
\/\/ src\/screens\/PostScreen.tsx\nimport React, {useState} from 'react';\nimport {Text, TextInput, Image, TouchableOpacity, StyleSheet, Alert} from 'react-native';\nimport {useRoute, RouteProp, useNavigation} from '@react-navigation\/native';\nimport { uploadPhoto, savePhotoToAlbum } from '..\/utils\/login';\nimport { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';\ntype StackParamList = {\n PostScreen: { imageUri: string };\n};\n\ntype PostScreenRouteProp = RouteProp<StackParamList, 'PostScreen'>;\nexport default function PostScreen() {\n const route = useRoute<PostScreenRouteProp>();\n const imageUri = route.params?.imageUri;\n const navigation = useNavigation();\n const [name, setName] = useState('');\n const [title, setTitle] = useState('');\n const [category, setCategory] = useState('');\n const handleSubmit = async () => {\n try {\n if (!imageUri){\n return\n }\n \/\/ \u4e0a\u4f20\u56fe\u7247\n const uploadResponse = await uploadPhoto(imageUri);\n if (uploadResponse && uploadResponse.code === 0) {\n console.log('Upload success!');\n \/\/ \u4fdd\u5b58\u5230\u76f8\u518c\n const saveResponse = await savePhotoToAlbum(category, name, title, uploadResponse.data);\n if (saveResponse && saveResponse.code === 0) {\n console.log('Save success!');\n navigation.navigate('MainTabs', { screen: '\u56fe\u5e93' });\n } else {\n Alert.alert('\u53d1\u5e03\u5931\u8d25', saveResponse ? saveResponse.description : '\u4fdd\u5b58\u5931\u8d25');\n }\n } else {\n Alert.alert('\u53d1\u5e03\u5931\u8d25', uploadResponse ? uploadResponse.description : '\u4e0a\u4f20\u5931\u8d25');\n }\n } catch (error) {\n console.error(error);\n }\n };\n return (\n <KeyboardAwareScrollView\n style={styles.container}\n resetScrollToCoords={{ x: 0, y: 0 }}\n contentContainerStyle={styles.container}\n scrollEnabled={true}\n keyboardShouldPersistTaps='always'\n keyboardDismissMode='none'\n >\n <Image source={{uri: imageUri}} style={styles.image}\/>\n <TextInput\n style={styles.input}\n placeholder=\"\u8bf7\u8f93\u5165\u6807\u9898\"\n value={name}\n onChangeText={setName}\n returnKeyType=\"done\"\n \/>\n <TextInput\n style={styles.input}\n placeholder=\"\u8bf7\u8f93\u5165\u63cf\u8ff0\"\n value={title}\n onChangeText={setTitle}\n returnKeyType=\"done\"\n \/>\n <TextInput\n style={styles.input}\n placeholder=\"\u8bf7\u9009\u62e9\u5206\u7c7b\"\n value={category}\n onChangeText={setCategory}\n returnKeyType=\"done\"\n \/>\n <TouchableOpacity style={styles.button} onPress={handleSubmit}>\n <Text style={styles.buttonText}>\u53d1\u5e03<\/Text>\n <\/TouchableOpacity>\n <\/KeyboardAwareScrollView>\n );\n}\n\nconst styles = StyleSheet.create({\n container: {\n flex: 1,\n padding: 20,\n backgroundColor: '#F5F5F5',\n },\n image: {\n width: '100%',\n height: 300,\n borderRadius: 10,\n marginBottom: 20,\n },\n input: {\n height: 60,\n borderColor: '#ddd',\n borderWidth: 1,\n marginTop: 20,\n paddingHorizontal: 10,\n fontSize: 20,\n borderRadius: 10,\n backgroundColor: '#FFFFFF',\n },\n button: {\n backgroundColor: '#4CAF50',\n padding: 15,\n margin: 20,\n borderRadius: 10,\n },\n buttonText: {\n color: 'white',\n textAlign: 'center',\n fontSize: 20,\n },\n});\n<\/code><\/pre>\n\n\n\n\u4e0a\u4f20\u63a5\u53e3\u9700\u8981<\/p>\n\n\n\n
api<\/p>\n\n\n\n
base64expo install expo-file-system<\/code><\/p>\n\n\n\nimport * as FileSystem from 'expo-file-system';\n\n\nexport const uploadPhoto = async (imageUri: string) => {\n try {\n const fileContent = await FileSystem.readAsStringAsync(imageUri, { encoding: FileSystem.EncodingType.Base64 });\n let data = new URLSearchParams({\n file: fileContent,\n mimeType: 'image\/jpeg', \/\/ \u6216\u8005 'image\/png'\uff0c\u53d6\u51b3\u4e8e\u4f60\u7684\u6587\u4ef6\u7c7b\u578b\n });\n\n let token = await AsyncStorage.getItem('token');\n let headers = {\n 'Content-Type': 'application\/x-www-form-urlencoded',\n };\n if (token) {\n headers['Authorization'] = `Bearer ${token}`;\n }\n let response = await fetch('https:\/\/muxuetianyin.cn\/api\/photoAlbum\/uploadBase64', {\n method: 'POST',\n headers: headers,\n body: data.toString(),\n });\n\n if (response.ok) {\n console.log('Upload success!');\n let responseJson = await response.json();\n console.log(responseJson)\n return responseJson;\n } else {\n console.log('Upload failed!');\n }\n } catch (error) {\n console.error('Error', error);\n }\n};\n\n\nexport const savePhotoToAlbum = async (category: string, name: string, title: string, url: string) => {\n let data = {\n category: category,\n name: name,\n title: title,\n url: url\n };\n try {\n let response:result<any> = await service.post('\/api\/photoAlbum\/save', data);\n\n if (response.code === 0) {\n \/\/ \u8bf7\u6c42\u6210\u529f\n console.log('Save success!');\n return response\n } else {\n \/\/ \u8bf7\u6c42\u5931\u8d25\n console.log('Save failed!');\n }\n } catch (error) {\n console.error(error);\n }\n};<\/code><\/pre>\n\n\n\n\u540e\u7aef<\/h3>\n\n\n\n@ApiOperation(\"\u4e0a\u4f20\u6587\u4ef6\uff08Base64\uff09\")\n@PostMapping(\"\/uploadBase64\")\npublic Result handleFileUploadBase64(@RequestParam(\"file\") String base64File, @RequestParam(\"mimeType\") String mimeType) {\n byte[] decodedBytes;\n try {\n \/\/ \u89e3\u7801Base64\u6587\u4ef6\n decodedBytes = Base64.getDecoder().decode(base64File);\n } catch (IllegalArgumentException e) {\n throw new BusinessException(ErrorCode.PARAMS_ERROR, \"Invalid Base64 input\");\n }\n\n \/\/ \u68c0\u67e5\u6587\u4ef6\u5927\u5c0f\uff0c\u8fd9\u91cc\u9650\u5236\u4e3a5MB\n if (decodedBytes.length > 5 * 1024 * 1024) {\n throw new BusinessException(ErrorCode.PARAMS_ERROR, \"File size should not exceed 5MB\");\n }\n\n String savePath = System.getProperty(\"user.dir\") + \"\/uploads\/images\";\n \/\/ \u786e\u4fdd\u8fd9\u4e2a\u76ee\u5f55\u662f\u771f\u5b9e\u5b58\u5728\u7684\n File directory = new File(savePath);\n if (!directory.exists()) {\n directory.mkdirs(); \/\/ \u521b\u5efa\u76ee\u5f55\uff0c\u5305\u62ec\u4efb\u4f55\u5fc5\u8981\u4f46\u4e0d\u5b58\u5728\u7684\u7236\u76ee\u5f55\n }\n \/\/ \u6839\u636eMIME\u7c7b\u578b\u786e\u5b9a\u6587\u4ef6\u6269\u5c55\u540d\n String extension = mimeType.split(\"\/\")[1];\n String filename = System.currentTimeMillis() + \".\" + extension;\n File dest = new File(directory, filename);\n\n try {\n \/\/ \u4fdd\u5b58\u6587\u4ef6\n Files.write(dest.toPath(), decodedBytes);\n\n \/\/ \u8fd4\u56de\u6210\u529f\u7684url \u672c\u5730\u8bbe\u7f6e\u7684\u8def\u5f84\n String fileUrl = serverAddress + \"uploads\/images\/\" + filename;\n return Result.success(fileUrl);\n } catch (IOException e) {\n e.printStackTrace();\n }\n\n throw new BusinessException(ErrorCode.PARAMS_ERROR, \"Failed to upload file\");\n}<\/code><\/pre>\n\n\n\n3.\u4e2a\u4eba\u9875\u9762\u8bbe\u8ba1<\/h3>\n\n\n\n \u5b89\u88c5ui\u5e93cnpm install react-native-elements yarn add react-native-elements<\/p>\n\n\n\n
\u5b89\u88c5\u5e03\u7ec4\u4ef6yarn add react-native-super-grid<\/p>\n\n\n\n
\u589e\u52a0\u8def\u7531<\/p>\n\n\n\n
function UserScreen() {\n return (\n <Stack.Navigator initialRouteName=\"UserScreen\">\n <Stack.Screen\n name=\"UserScreen\"\n component={HighlightScreen}\n options={{\n \/\/ title: '\u4e2a\u4eba',\n headerShown: false,\n }}\n \/>\n <Stack.Screen\n name=\"EditUser\"\n component={EditUserScreen}\n \/>\n <Stack.Screen\n name=\"ProjectScreen\"\n component={ProjectScreen}\n \/>\n <\/Stack.Navigator>\n );\n}<\/code><\/pre>\n\n\n\n\u4f18\u5316\u8def\u7531\u5bfc\u51fa\uff0c\u5728screen\u91cc\u9762\u65b0\u5efaindex.ts\u5bfc\u51fa\u6240\u6709\u9875\u9762<\/p>\n\n\n\n
\/\/ src\/screens\/index.js\nexport { default as HomeScreen } from '.\/HomeScreen';\nexport { default as DetailsScreen } from '.\/DetailsScreen';\nexport { default as PhotoPickerStack } from '.\/PhotoPickerStack';\nexport { default as LifeScreen } from '.\/LifeScreen';\nexport { default as AlbumScreen } from '.\/AlbumScreen';\nexport { default as HighlightScreen } from '.\/HighlightScreen';\nexport { default as PostScreen } from '.\/PostScreen';\nexport { default as LoginScreen } from '.\/LoginScreen';\nexport { default as EditUserScreen } from '.\/EditUserScreen';\nexport { default as ProjectScreen } from '.\/ProjectScreen';\n<\/code><\/pre>\n\n\n\n\u7136\u540e\u8def\u7531<\/p>\n\n\n\n
import {
\u4e2a\u4eba\u9875\u9762\u8fd9\u91cc\u4f7f\u7528\u4e86react-native-elementsimport <\/p>\n\n\n\n
import React, { useState, useEffect } from 'react';\nimport { View, StyleSheet, Button } from 'react-native';\nimport { Avatar, ListItem, Card, Text } from 'react-native-elements';\nimport { useNavigation } from '@react-navigation\/native';\nimport { getCurrentUser, updateUser } from '..\/utils\/user';\n\nexport default function ProfileScreen() {\n const [user, setUser] = useState(null);\n const navigation = useNavigation();\n\n useEffect(() => {\n fetchUser();\n }, []);\n\n const fetchUser = async () => {\n const userData = await getCurrentUser();\n setUser(userData);\n };\n\n const handleEdit = () => {\n navigation.navigate('EditUser', {\n user: user,\n onGoBack: () => fetchUser(),\n });\n };\n const handleViewProjects = () => {\n navigation.navigate('ProjectScreen');\n };\n if (!user) {\n return <Card><Card.Title>Loading...<\/Card.Title><\/Card>;\n }\n\n return (\n <View style={styles.container}>\n <Card>\n <Card.Title>{user.username}<\/Card.Title>\n <Card.Divider\/>\n <View style={styles.avatarContainer}>\n <Avatar\n rounded\n size=\"large\"\n source={{\n uri: user.avatarUrl,\n }}\n \/>\n <\/View>\n <Text style={styles.signature}>{user.signature}<\/Text>\n <Card.Divider\/>\n <ListItem bottomDivider>\n <ListItem.Content>\n <ListItem.Title>Email<\/ListItem.Title>\n <ListItem.Subtitle>{user.email}<\/ListItem.Subtitle>\n <\/ListItem.Content>\n <\/ListItem>\n <ListItem bottomDivider>\n <ListItem.Content>\n <ListItem.Title>Phone<\/ListItem.Title>\n <ListItem.Subtitle>{user.phone}<\/ListItem.Subtitle>\n <\/ListItem.Content>\n <\/ListItem>\n <ListItem bottomDivider>\n <ListItem.Content>\n <ListItem.Title>Gender<\/ListItem.Title>\n <ListItem.Subtitle>{user.gender}<\/ListItem.Subtitle>\n <\/ListItem.Content>\n <\/ListItem>\n <ListItem bottomDivider>\n <Button title=\"View Projects\" onPress={handleViewProjects} \/>\n <\/ListItem>\n \n <Button title=\"Edit\" onPress={handleEdit} \/>\n <\/Card>\n <\/View>\n );\n}\n\nconst styles = StyleSheet.create({\n container: {\n flex: 1,\n padding: 10,\n },\n avatarContainer: {\n alignItems: 'center',\n },\n signature: {\n marginTop: 10,\n marginBottom: 10,\n textAlign: 'center',\n },\n});<\/code><\/pre>\n\n\n\n\u7f16\u8f91\u4e2a\u4eba\u4fe1\u9875\u9762<\/p>\n\n\n\n
\/\/ src\/screens\/EditUserScreen.js\nimport React, { useState } from 'react';\nimport { View, Text, TextInput, Button, StyleSheet } from 'react-native';\nimport { updateUser } from '..\/utils\/user'; \/\/ \u5bfc\u5165\u66f4\u65b0\u7528\u6237\u4fe1\u606f\u7684\u51fd\u6570\n\nexport default function EditUserScreen({ route, navigation }) {\n const { user, onGoBack } = route.params;\n const [username, setUsername] = useState(user.username);\n const [email, setEmail] = useState(user.email);\n const [phone, setPhone] = useState(user.phone);\n const [signature, setSignature] = useState(user.signature);\n\n const handleSave = async () => {\n const updatedUser = {\n ...user,\n username,\n email,\n phone,\n signature,\n };\n await updateUser(updatedUser);\n navigation.dangerouslyGetParent().options.onGoBack();\n navigation.goBack();\n };\n\n return (\n <View style={styles.container}>\n <Text>Username<\/Text>\n <TextInput\n value={username}\n onChangeText={setUsername}\n style={styles.input}\n \/>\n <Text>Email<\/Text>\n <TextInput\n value={email}\n onChangeText={setEmail}\n style={styles.input}\n \/>\n <Text>Phone<\/Text>\n <TextInput\n value={phone}\n onChangeText={setPhone}\n style={styles.input}\n \/>\n <Text>Signature<\/Text>\n <TextInput\n value={signature}\n onChangeText={setSignature}\n style={styles.input}\n \/>\n <Button title=\"Save\" onPress={handleSave} \/>\n <\/View>\n );\n}\n\nconst styles = StyleSheet.create({\n container: {\n flex: 1,\n padding: 20,\n },\n input: {\n height: 40,\n borderColor: 'gray',\n borderWidth: 1,\n marginBottom: 10,\n },\n});\n<\/code><\/pre>\n\n\n\nuserApi<\/code><\/p>\n\n\n\nimport service from '.\/api';\n\nexport const getCurrentUser = async () => {\n try {\n let response:result<any> = await service.get('\/api\/user\/current');\n\n if (response.code === 0) {\n \/\/ \u8bf7\u6c42\u6210\u529f\n console.log('Get current user success!');\n return response.data;\n } else {\n \/\/ \u8bf7\u6c42\u5931\u8d25\n console.log('Get current user failed!');\n }\n } catch (error) {\n console.error(error);\n }\n};\n\nexport const updateUser = async (userUpdateRequest) => {\n try {\n let response:result<any> = await service.put('\/api\/user\/update', userUpdateRequest);\n\n if (response.code === 0) {\n \/\/ \u8bf7\u6c42\u6210\u529f\n console.log('Update user success!');\n return response.data;\n } else {\n \/\/ \u8bf7\u6c42\u5931\u8d25\n console.log('Update user failed!');\n }\n } catch (error) {\n console.error(error);\n }\n};<\/code><\/pre>\n\n\n\n\u9879\u76ee\u9875\u9762\u5e03\u5199\u6b7b<\/p>\n\n\n\n
import React from 'react';\nimport { View, StyleSheet, Image, FlatList } from 'react-native';\nimport { Avatar, ListItem, Card, Text } from 'react-native-elements';\n\nconst projects = [\n {\n title: '\u9879\u76ee\u4e00\uff1amuxue-user',\n description: '\u8fd9\u662f\u4e00\u4e2a\u5168\u6808\u7684\u7528\u6237\u7ba1\u7406\u7cfb\u7edf\uff0c\u5305\u62ec\u7528\u6237\u7684\u589e\u5220\u6539\u67e5\u3001\u6743\u9650\u7ba1\u7406\u7b49\u529f\u80fd\u3002',\n imageUrl: 'http:\/\/example.com\/project1.png',\n tags: ['React', 'Ant Design Pro', 'Spring Boot', 'MyBatis Plus', 'Docker'],\n },\n \/\/ \u5176\u4ed6\u9879\u76ee...\n];\n\nexport default function ProjectScreen() {\n return (\n <View style={styles.container}>\n <FlatList\n data={projects}\n keyExtractor={(item, index) => index.toString()}\n renderItem={({ item }) => (\n <Card>\n <Card.Title>{item.title}<\/Card.Title>\n <Card.Divider\/>\n <Image\n style={styles.image}\n source={{\n uri: item.imageUrl,\n }}\n \/>\n <Text>{item.description}<\/Text>\n {item.tags.map((tag, index) => (\n <Text key={index} style={styles.tag}>\n {tag}\n <\/Text>\n ))}\n <\/Card>\n )}\n \/>\n <\/View>\n );\n}\n\nconst styles = StyleSheet.create({\n container: {\n flex: 1,\n padding: 10,\n },\n image: {\n width: '100%',\n height: 200,\n },\n tag: {\n backgroundColor: '#eee',\n padding: 5,\n margin: 2,\n },\n});<\/code><\/pre>\n\n\n\n4.\u76f8\u518c\u9875\u9762<\/h3>\n\n\n\n imagesApi<\/p>\n\n\n\n
import * as FileSystem from \"expo-file-system\";\nimport AsyncStorage from \"@react-native-async-storage\/async-storage\";\nimport service from \".\/api\";\n\nexport const uploadPhoto = async (imageUri: string) => {\n try {\n const fileContent = await FileSystem.readAsStringAsync(imageUri, { encoding: FileSystem.EncodingType.Base64 });\n let data = new URLSearchParams({\n file: fileContent,\n mimeType: 'image\/jpeg', \/\/ \u6216\u8005 'image\/png'\uff0c\u53d6\u51b3\u4e8e\u4f60\u7684\u6587\u4ef6\u7c7b\u578b\n });\n\n let token = await AsyncStorage.getItem('token');\n let headers = {\n 'Content-Type': 'application\/x-www-form-urlencoded',\n };\n if (token) {\n headers['Authorization'] = `Bearer ${token}`;\n }\n let response = await fetch('https:\/\/muxuetianyin.cn\/api\/photoAlbum\/uploadBase64', {\n method: 'POST',\n headers: headers,\n body: data.toString(),\n });\n\n if (response.ok) {\n console.log('Upload success!');\n let responseJson = await response.json();\n console.log(responseJson)\n return responseJson;\n } else {\n console.log('Upload failed!');\n }\n } catch (error) {\n console.error('Error', error);\n }\n};\nexport const savePhotoToAlbum = async (category: string, name: string, title: string, url: string) => {\n let data = {\n category: category,\n name: name,\n title: title,\n url: url\n };\n try {\n let response:result<any> = await service.post('\/api\/photoAlbum\/save', data);\n\n if (response.code === 0) {\n \/\/ \u8bf7\u6c42\u6210\u529f\n console.log('Save success!');\n return response\n } else {\n \/\/ \u8bf7\u6c42\u5931\u8d25\n console.log('Save failed!');\n }\n } catch (error) {\n console.error(error);\n }\n};\n\nexport const searchPhotoAlbum = async (category?: string, name?: string, page?: number, size?: number) => {\n try {\n let params = {};\n if (category) params['category'] = category;\n if (name) params['name'] = name;\n if (page) params['page'] = page;\n if (size) params['size'] = size;\n console.log(params)\n let response:RES<any> = await service.get('\/api\/photoAlbum\/search', { params });\n\n if (response.code === 0) {\n console.log('Fetch success!');\n return response.data;\n } else {\n console.log('Fetch failed!');\n }\n } catch (error) {\n console.error(error);\n }\n};\nexport const getPhotoCategories = async () => {\n try {\n let response:result<any> = await service.get('\/api\/photoAlbum\/categories');\n\n if (response.code === 0) {\n \/\/ \u8bf7\u6c42\u6210\u529f\n console.log('Fetch success!');\n return response.data;\n } else {\n \/\/ \u8bf7\u6c42\u5931\u8d25\n console.log('Fetch failed!');\n }\n } catch (error) {\n console.error(error);\n }\n};\n<\/code><\/pre>\n\n\n\n\u8bbe\u8ba1\u53c2\u8003\u4e4b\u524d\u7684\u7f51\u7ad9\uff0creact-native\u4e0d\u597d\u5b9e\u73b0<\/p>\n\n\n\n
\u4ee3\u7801<\/p>\n\n\n\n
\u4e3b\u8981\u8bbe\u8ba1\u5206\u7c7b\u548c\u641c\u7d22<\/p>\n\n\n\n
\u5bf9\u6b64\u8fdb\u884c\u76d1\u542c<\/p>\n\n\n\n
useEffect(() => {\n fetchPhotos();\n}, [selectedIndex]);\nuseEffect(() => {\n if (search==''){\n fetchPhotos();\n }\n}, [search]);<\/code><\/pre>\n\n\n\n\u4f7f\u7528react-native-elements\u8fdb\u884c\u5e03\u5c40<\/p>\n\n\n\n
\u4ee3\u7801<\/p>\n\n\n\n
import React, { useState, useEffect } from 'react';\nimport { View, FlatList, StyleSheet, ScrollView, ActivityIndicator } from 'react-native';\nimport { Card, Text, Avatar, Button, Overlay, SearchBar, Icon } from 'react-native-elements';\nimport { getPhotoCategories, searchPhotoAlbum } from '..\/utils\/images';\n\nexport default function AlbumScreen() {\n const [categories, setCategories] = useState([]);\n const [selectedIndex, setSelectedIndex] = useState(0);\n const [photos, setPhotos] = useState([]);\n const [page, setPage] = useState(1);\n const [total, setTotal] = useState(0);\n const [loading, setLoading] = useState(false);\n const [search, setSearch] = useState('');\n\n useEffect(() => {\n fetchCategories();\n fetchPhotos();\n }, []);\n\n useEffect(() => {\n fetchPhotos();\n }, [selectedIndex]);\n useEffect(() => {\n if (search==''){\n fetchPhotos();\n }\n }, [search]);\n const fetchCategories = async () => {\n setLoading(true);\n const data = await getPhotoCategories();\n setCategories(['All', ...data]);\n setLoading(false);\n };\n const fetchPhotos = async () => {\n setLoading(true);\n let category = categories[selectedIndex] === 'All' ? '' : categories[selectedIndex];\n const data = await searchPhotoAlbum(category, search, page, 10);\n setPhotos(data.list);\n setTotal(data.total);\n if (data){\n setTimeout(()=>{\n setLoading(false);\n },200)\n }\n };\n\n const handleCategoryChange = (selectedIndex) => {\n setSelectedIndex(selectedIndex);\n if (categories[selectedIndex] === 'All') {\n setSearch('');\n setPage(1)\n return\n }\n \/\/ fetchPhotos();\n };\n\n const handlePageChange = (newPage) => {\n if (newPage < 1 || newPage > Math.ceil(total \/ 10)) {\n return;\n }\n setPage(newPage);\n fetchPhotos();\n };\n\n const handleSearchChange = (text) => {\n setSearch(text);\n };\n\n const handleSearchSubmit = () => {\n fetchPhotos();\n };\n\n const handleSearchClear = () => {\n setSearch('');\n };\n\n return (\n <View style={styles.container}>\n <SearchBar\n placeholder=\"Search Photos...\"\n onChangeText={handleSearchChange}\n onSubmitEditing={handleSearchSubmit}\n onClear={handleSearchClear}\n value={search}\n containerStyle={styles.searchBar}\n \/>\n <ScrollView horizontal showsHorizontalScrollIndicator={false}>\n {categories.map((category, index) => (\n <Button\n key={index}\n title={category}\n onPress={() => handleCategoryChange(index)}\n containerStyle={styles.button}\n titleStyle={styles.buttonTitle}\n \/>\n ))}\n <\/ScrollView>\n <FlatList\n data={photos}\n renderItem={({ item }) => (\n <Card>\n <Card.Title>{item.name}<\/Card.Title>\n <Card.Divider\/>\n <Avatar source={{ uri: item.url }} size=\"large\" \/>\n <Text>{item.title}<\/Text>\n <Text>{item.upload_time}<\/Text>\n <\/Card>\n )}\n keyExtractor={(item, index) => index.toString()}\n \/>\n <View style={styles.buttonContainer}>\n <Button title=\"Previous\" onPress={() => handlePageChange(page - 1)} \/>\n <Text>Page {page} of {Math.ceil(total \/ 10)}<\/Text>\n <Button title=\"Next\" onPress={() => handlePageChange(page + 1)} \/>\n <\/View>\n <Overlay isVisible={loading}>\n <ActivityIndicator size=\"large\" color=\"#0000ff\" \/>\n <\/Overlay>\n <\/View>\n );\n};\n\nconst styles = StyleSheet.create({\n container: {\n flex: 1,\n padding: 10,\n },\n searchBar: {\n marginBottom: 10,\n },\n button: {\n marginRight: 10,\n height: 40,\n },\n buttonTitle: {\n fontSize: 14,\n },\n buttonContainer: {\n flexDirection: 'row',\n justifyContent: 'space-between',\n alignItems: 'center',\n marginTop: 10,\n },\n});\n<\/code><\/pre>\n\n\n\n\u8def\u7531\u66f4\u6539\uff0c\u8bbe\u8ba1\u5168\u90e8\u653e\u5230\u6808\u91cc\u9762\u53bb<\/p>\n\n\n\n
\u9ed8\u8ba4\u5bfc\u51fa<\/p>\n\n\n\n
export default function Router() {\n return (\n <Stack.Navigator>\n <Stack.Screen\n name=\"MainTabs\"\n component={MainTabs}\n options={{headerShown: false}}\n \/>\n <Stack.Screen\n name=\"Details\"\n component={OtherScreens}\n options={{\n headerLeft: (props) => (\n <HeaderBackButton\n {...props}\n labelVisible={false}\n \/>\n ),\n }}\n \/>\n <Stack.Screen\n name=\"Login\"\n component={Login}\n options={{headerShown: false}}\n \/>\n <\/Stack.Navigator>\n );\n}<\/code><\/pre>\n\n\n\nMainTabs\u662ftab\u5bfc\u822a\u8def\u7531,\u4ed6\u8fd9\u4e2a\u4f1a\u6709\u4e00\u4e2a\u6807\u9898\uff0c\u627e\u4e86\u597d\u4e45\u8fd8\u662f\u4e0d\u80fd\u56e0\u6b64\u53ea\u80fd\u9690\u85cfStack.Screen\u7684\uff0c\u7136\u540e\u5bfc\u822a\u91cc\u9762\u53ef\u4ee5\u914d\u7f6e\u65b9\u6cd5\u8bbe\u8ba1\u591a\u4e2aStack.Screen\u5c4f\u5e55\uff0c\u7136\u540e\u4e0b\u9762\u4e24\u4e2aStack.Screen\u5c31\u53ef\u4ee5\u6446\u8131\u5bfc\u822atab<\/p>\n\n\n\n
function MainTabs() {\n return (\n <Tab.Navigator>\n <Tab.Screen\n name=\"\u9996\u9875\"\n component={HomeStack}\n options={({route}) =>\n ({\n tabBarIcon: ({color, size}) => (\n <Ionicons name=\"home\" color={color} size={size}\/>\n ),\n })\n }\n \/>\n <Tab.Screen\n name=\"\u52a8\u6001\"\n component={LifeScreen}\n options={{\n tabBarIcon: ({color, size}) => (\n <Ionicons name=\"md-pulse\" color={color} size={size}\/>\n ),\n }}\n \/>\n <Tab.Screen\n name=\"\u53d1\u5e03\"\n component={PhotoPicker}\n options={({route}) => ({\n tabBarIcon: () => (\n <Ionicons name=\"add-circle\" color=\"#fb4a3e\" size={40}\/>\n ),\n tabBarLabel: () => null,\n \/\/ title: '',\n })}\n \/>\n <Tab.Screen\n name=\"\u56fe\u5e93\"\n component={AlbumScreen}\n options={{\n tabBarIcon: ({color, size}) => (\n <Ionicons name=\"images\" color={color} size={size}\/>\n ),\n }}\n \/>\n <Tab.Screen name=\"\u4e2a\u4eba\" component={UserScreen}\n options={{\n tabBarIcon: ({color, size}) => (\n <Ionicons name=\"person\" color={color} size={size}\/>\n ),\n }}\n \/>\n <\/Tab.Navigator>\n );\n}<\/code><\/pre>\n\n\n\n\u6253\u5305\u6d4b\u8bd5<\/h2>\n\n\n\n \u5b89\u53531. \u5b89\u88c5Android SDK\uff1a\u5982\u679c\u4f60\u8fd8\u6ca1\u6709\u5b89\u88c5Android SDK\uff0c\u4f60\u53ef\u4ee5\u901a\u8fc7\u5b89\u88c5Android Studio\u6765\u8fdb\u884c\u5b89\u88c5\u3002\u5728\u5b89\u88c5\u8fc7\u7a0b\u4e2d\uff0cAndroid SDK\u4f1a\u81ea\u52a8\u5b89\u88c5\u3002 2. \u8bbe\u7f6eANDROID_HOME\u73af\u5883\u53d8\u91cf\uff1a\u5b89\u88c5\u5b8cAndroid SDK\u540e\uff0c\u4f60\u9700\u8981\u8bbe\u7f6eANDROID_HOME\u73af\u5883\u53d8\u91cf\uff0c\u4f7f\u5176\u6307\u5411\u4f60\u7684Android SDK\u7684\u4f4d\u7f6e\u3002\u5728Windows\u4e0a\u7684\u9ed8\u8ba4\u4f4d\u7f6e\u662fC:\\Users\\<\u4f60\u7684\u7528\u6237\u540d>\\AppData\\Local\\Android\\Sdk\u3002 \u4ee5\u4e0b\u662f\u5728Windows\u4e0a\u8bbe\u7f6eANDROID_HOME\u73af\u5883\u53d8\u91cf\u7684\u65b9\u6cd5\uff1a – \u5728Windows\u641c\u7d22\u680f\u4e2d\u641c\u7d22’\u73af\u5883\u53d8\u91cf’\uff0c\u7136\u540e\u9009\u62e9’\u7f16\u8f91\u7cfb\u7edf\u73af\u5883\u53d8\u91cf’\u3002 – \u5728\u51fa\u73b0\u7684\u7cfb\u7edf\u5c5e\u6027\u7a97\u53e3\u4e2d\uff0c\u70b9\u51fb’\u73af\u5883\u53d8\u91cf’\u3002 – \u5728\u73af\u5883\u53d8\u91cf\u7a97\u53e3\u4e2d\uff0c\u70b9\u51fb’\u65b0\u5efa’\uff0c\u5728’\u7528\u6237\u53d8\u91cf’\u90e8\u5206\u3002 – \u5728\u65b0\u7528\u6237\u53d8\u91cf\u7a97\u53e3\u4e2d\uff0c\u8f93\u5165ANDROID_HOME\u4f5c\u4e3a\u53d8\u91cf\u540d\uff0c\u8f93\u5165\u4f60\u7684Android SDK\u7684\u8def\u5f84\u4f5c\u4e3a\u53d8\u91cf\u503c\uff08\u4f8b\u5982\uff0cC:\\Users\\<\u4f60\u7684\u7528\u6237\u540d>\\AppData\\Local\\Android\\Sdk\uff09\u3002 – \u5728\u6240\u6709\u7a97\u53e3\u4e2d\u70b9\u51fb’\u786e\u5b9a’\u4ee5\u5e94\u7528\u66f4\u6539\u3002 3. \u5c06Android SDK\u5de5\u5177\u6dfb\u52a0\u5230Path\uff1a\u4f60\u8fd8\u9700\u8981\u5c06Android SDK\u5de5\u5177\u6dfb\u52a0\u5230\u4f60\u7684Path\u53d8\u91cf\uff1a – \u5728\u540c\u4e00\u4e2a\u73af\u5883\u53d8\u91cf\u7a97\u53e3\u4e2d\uff0c\u6eda\u52a8\u5230’\u7cfb\u7edf\u53d8\u91cf’\u90e8\u5206\uff0c\u9009\u62e9’Path’\u53d8\u91cf\uff0c\u7136\u540e\u70b9\u51fb’\u7f16\u8f91’\u3002 – \u5728\u7f16\u8f91\u73af\u5883\u53d8\u91cf\u7a97\u53e3\u4e2d\uff0c\u70b9\u51fb’\u65b0\u5efa’\uff0c\u5e76\u6dfb\u52a0\u4ee5\u4e0b\u8def\u5f84\uff08\u5c06<\u4f60\u7684SDK\u8def\u5f84>\u66ff\u6362\u4e3a\u4f60\u7684Android SDK\u7684\u5b9e\u9645\u8def\u5f84\uff09\uff1a <\u4f60\u7684SDK\u8def\u5f84>\\platform-tools <\u4f60\u7684SDK\u8def\u5f84>\\tools <\u4f60\u7684SDK\u8def\u5f84>\\tools\\bin<\/p>\n\n\n\n
Android Studio \u5b89\u88c5<\/h2>\n\n\n\n \u53cc\u51fb\u8fd0\u884c\u5b89\u88c5\u3002<\/p>\n\n\n\n<\/div><\/figure>\n\n\n\n
<\/div><\/figure>\n\n\n\n
<\/div><\/figure>\n\n\n\n
<\/div><\/figure>\n\n\n\n
<\/div><\/figure>\n\n\n\n
<\/div><\/figure>\n\n\n\n
\u5148\u4e0d\u7ba1<\/p>\n\n\n\n<\/div><\/figure>\n\n\n\n
\u56e0\u4e3a\u662f\u8c37\u6b4c\u8bbe\u7f6e\u4ee3\u7406<\/p>\n\n\n\n<\/div><\/figure>\n\n\n\n
\u4ee3\u7406\u817e\u8baf\uff1a https:\/\/mirrors.cloud.tencent.com\/AndroidSDK\/ <\/p>\n\n\n\n
\u963f\u91cc\uff1a https:\/\/mirrors.aliyun.com\/android.googlesource.com\/<\/p>\n\n\n\n
Android SDK\u5728\u7ebf\u66f4\u65b0\u955c\u50cf\u670d\u52a1\u5668<\/p>\n\n\n\n
1.\u4e2d\u56fd\u79d1\u5b66\u9662\u5f00\u6e90\u534f\u4f1a\u955c\u50cf\u7ad9\u5730\u5740:<\/p>\n\n\n\n
\u25e6IPV4\/IPV6: mirrors.opencas.cn \u7aef\u53e3\uff1a80<\/p>\n\n\n\n
\u25e6IPV4\/IPV6: mirrors.opencas.org \u7aef\u53e3\uff1a80<\/p>\n\n\n\n
\u25e6IPV4\/IPV6: mirrors.opencas.ac.cn \u7aef\u53e3\uff1a80<\/p>\n\n\n\n
2.\u4e0a\u6d77GDG\u955c\u50cf\u670d\u52a1\u5668\u5730\u5740:<\/p>\n\n\n\n
sdk.gdgshanghai.com \u7aef\u53e3\uff1a8000<\/p>\n\n\n\n
3.\u5317\u4eac\u5316\u5de5\u5927\u5b66\u955c\u50cf\u670d\u52a1\u5668\u5730\u5740:<\/p>\n\n\n\n
\u25e6IPv4: ubuntu.buct.edu.cn\/ \u7aef\u53e3\uff1a80<\/p>\n\n\n\n
\u25e6IPv4: ubuntu.buct.cn\/ \u7aef\u53e3\uff1a80<\/p>\n\n\n\n
\u25e6IPv6: ubuntu.buct6.edu.cn\/ \u7aef\u53e3\uff1a80<\/p>\n\n\n\n
4.\u5927\u8fde\u4e1c\u8f6f\u4fe1\u606f\u5b66\u9662\u955c\u50cf\u670d\u52a1\u5668\u5730\u5740:<\/p>\n\n\n\n
mirrors.neusoft.edu.cn \u7aef\u53e3\uff1a80<\/p>\n\n\n\n
5.\u817e\u8bafBugly \u955c\u50cf:<\/p>\n\n\n\n
android-mirror.bugly.qq.com \u7aef\u53e3\uff1a8080<\/p>\n\n\n\n
\u914d\u7f6e\u5b8c\u6210\u4e4b\u540e\u70b9\u51fb\u5b8c\u6210<\/p>\n\n\n\n<\/div><\/figure>\n\n\n\n
<\/div><\/figure>\n\n\n\n
<\/div><\/figure>\n\n\n\n
\u70b9\u51fb\u786e\u5b9a\uff0c\u7136\u540e\u70b9\u51fb\u7cfb\u7edf\u53d8\u91cf\u4e0b\u7684path\u53d8\u91cf\uff0c\u6dfb\u52a0\u8fd9\u4e24\u6761\u5185\u5bb9E:\\Android\\SDK\\emulator<\/code>\uff0cE:\\Android\\SDK\\tools<\/code>\uff0cE:\\Android\\SDK\\tools\\bin<\/code>\uff0cE:\\Android\\SDK\\platform-tools<\/code><\/p>\n\n\n\nE:\\Android\\SDK\\platform-tools <\/p>\n\n\n\n
E:\\Android\\SDK\\tools <\/p>\n\n\n\n
E:\\Android\\SDK\\emulator <\/p>\n\n\n\n
E:\\Android\\SDK\\tools\\bin<\/p>\n\n\n\n<\/div><\/figure>\n\n\n\n
<\/div><\/figure>\n\n\n\n
\u91cd\u65b0\u8fd0\u884c\u00b7expo start –android<\/p>\n\n\n\n
\u8fde\u63a5\u624b\u673a\u8c03\u8bd5<\/p>\n\n\n\n
\u6253\u5305npm install -g eas-cli<\/p>\n\n\n\n
\u914d\u7f6e\u8d26\u53f7\u5bc6\u7801eas build:configure<\/p>\n\n\n\n
\u6253\u5305\u5b89\u5353eas build -p android<\/p>\n\n\n\n
\u5982\u679c\u7f51\u7edc\u9519\u8bef\u53ef\u80fd\u9700\u8981vpn\uff0c\u540e\u9762\u8fd8\u662f\u6253\u5305\u4e0d\u6210\u529f\uff0c\u6ca1\u529e\u6cd5\u8fd9\u4e2a\u5751\u6ca1\u6cd5\u89e3\u51b3\uff0c\u53ea\u80fd\u9879\u76ee\u8fc1\u79fb\u4e86\uff0cExpo\u8fc1\u79fb\u5230\u539f\u751freact-native<\/p>\n\n\n\n
\u6253\u5305\u6210\u529f<\/strong> eas build –platform all Loaded “env” configuration for the “production” profile: no environment variables specified. Learn more: https:\/\/docs.expo.dev\/build-reference\/variables\/ \ufffd\ufffd\ufffd Android build \u221a Using remote Android credentials (Expo server) \u221a Using Keystore from configuration: Build Credentials WZTpmXjDyE (default) Compressing project files and uploading to EAS Build. Learn more: https:\/\/expo.fyi\/eas-build-archive \u221a Uploaded to EAS 6s<\/p>\n\n\n\n\u6253\u5305\u6210\u529f\u540e\u7684\u5b89\u5353\u5e94\u7528\uff08APK\u6587\u4ef6\uff09\u53ef\u4ee5\u5728Expo\u7684EAS Build\u9875\u9762\u4e0b\u8f7d\u3002\u4f60\u53ef\u4ee5\u6309\u7167\u4ee5\u4e0b\u6b65\u9aa4\u6765\u4e0b\u8f7d\u4f60\u7684\u5e94\u7528\uff1a<\/p>\n\n\n\n
\n\u6253\u5f00\u4f60\u7684\u6d4f\u89c8\u5668\uff0c\u8bbf\u95eeExpo\u7684\u7f51\u7ad9\u3002<\/li>\n\n\n\n \u70b9\u51fb\u53f3\u4e0a\u89d2\u7684”Sign in”\u6309\u94ae\uff0c\u4f7f\u7528\u4f60\u7684\u8d26\u6237\u767b\u5f55\u3002<\/li>\n\n\n\n \u5728\u767b\u5f55\u540e\u7684\u9875\u9762\uff0c\u70b9\u51fb\u5de6\u4fa7\u83dc\u5355\u7684”Projects”\u9009\u9879\u3002<\/li>\n\n\n\n \u5728\u9879\u76ee\u5217\u8868\u4e2d\uff0c\u627e\u5230\u4f60\u521a\u521a\u6784\u5efa\u7684\u9879\u76ee\uff0c\u70b9\u51fb\u8fdb\u5165\u3002<\/li>\n\n\n\n \u5728\u9879\u76ee\u7684\u9875\u9762\u4e2d\uff0c\u70b9\u51fb\u9876\u90e8\u7684”Builds”\u9009\u9879\u3002<\/li>\n\n\n\n \u5728”Builds”\u9875\u9762\u4e2d\uff0c\u4f60\u53ef\u4ee5\u770b\u5230\u4f60\u7684\u6240\u6709\u6784\u5efa\u5386\u53f2\u3002\u627e\u5230\u4f60\u521a\u521a\u6784\u5efa\u7684Android\u5e94\u7528\uff0c\u70b9\u51fb\u53f3\u4fa7\u7684”Download”\u6309\u94ae\u3002<\/li>\n\n\n\n \u6d4f\u89c8\u5668\u4f1a\u5f00\u59cb\u4e0b\u8f7d\u4f60\u7684\u5e94\u7528\u3002\u4e0b\u8f7d\u5b8c\u6210\u540e\uff0c\u4f60\u53ef\u4ee5\u5c06\u8fd9\u4e2aAPK\u6587\u4ef6\u5b89\u88c5\u5230\u4f60\u7684Android\u8bbe\u5907\u4e0a\u3002<\/li>\n\n\n\n <\/div>\u7531\u4e8e\u4e0b\u8f7d\u4e0b\u6765\u7684\u8fd8\u662faad\u6587\u4ef6\uff0c\u4e0d\u80fd\u76f4\u63a5\u5b89\u88c5
<\/div>\n
\n\u6253\u5f00Android Studio<\/strong>\uff1a\u542f\u52a8Android Studio\uff0c\u7136\u540e\u5728\u6b22\u8fce\u754c\u9762\u9009\u62e9”Profile or debug APK”\u3002<\/li>\n\n\n\n\u9009\u62e9\u4f60\u7684.aab\u6587\u4ef6<\/strong>\uff1a\u5728\u5f39\u51fa\u7684\u6587\u4ef6\u9009\u62e9\u5668\u4e2d\uff0c\u627e\u5230\u5e76\u9009\u62e9\u4f60\u7684.aab\u6587\u4ef6\uff0c\u7136\u540e\u70b9\u51fb”OK”\u3002<\/li>\n\n\n\n\u751f\u6210APK\u6587\u4ef6<\/strong>\uff1a\u5728Android Studio\u7684\u83dc\u5355\u4e2d\uff0c\u9009\u62e9”Build > Build Bundle(s) \/ APK(s) > Build APK(s)”\u3002Android Studio\u4f1a\u5f00\u59cb\u751f\u6210APK\u6587\u4ef6\u3002<\/li>\n\n\n\n\u627e\u5230\u5e76\u5b89\u88c5APK\u6587\u4ef6<\/strong>\uff1a\u751f\u6210\u5b8c\u6210\u540e\uff0cAndroid Studio\u4f1a\u663e\u793a\u4e00\u4e2a\u901a\u77e5\uff0c\u544a\u8bc9\u4f60APK\u6587\u4ef6\u7684\u4f4d\u7f6e\u3002\u4f60\u53ef\u4ee5\u70b9\u51fb\u8fd9\u4e2a\u901a\u77e5\u6765\u6253\u5f00\u6587\u4ef6\u4f4d\u7f6e\uff0c\u7136\u540e\u5c06APK\u6587\u4ef6\u5b89\u88c5\u5230\u4f60\u7684\u8bbe\u5907\u4e0a\u3002 <\/div><\/li>\n<\/ol>\n<\/li>\n<\/ol>\n\n\n\n
\u4e0b\u8f7dbundletool\u6765\u8fdb\u884c\u5b89\u88c5https:\/\/github.com\/google\/bundletool\/releases<\/p>\n\n\n\n
1.\u4e0b\u8f7dbundletool<\/strong>\uff1a\u4f60\u53ef\u4ee5\u4ecebundletool\u7684GitHub\u9875\u9762\u4e0b\u8f7d\u6700\u65b0\u7684bundletool\u7684jar\u6587\u4ef6\u3002<\/p>\n\n\n\n2.\u751f\u6210APKs\u6587\u4ef6<\/strong>\uff1a\u6253\u5f00\u7ec8\u7aef\uff0c\u8fd0\u884c\u4ee5\u4e0b\u547d\u4ee4\u6765\u751f\u6210APKs\u6587\u4ef6\u3002\u5176\u4e2d\uff0cpath\/to\/bundletool.jar\u662f\u4f60\u4e0b\u8f7d\u7684bundletool\u7684\u8def\u5f84\uff0cpath\/to\/your-app.aab\u662f\u4f60\u7684.aab\u6587\u4ef6\u7684\u8def\u5f84\uff0cpath\/to\/output.apks\u662f\u8f93\u51fa\u7684APKs\u6587\u4ef6\u7684\u8def\u5f84\u3002 java -jar path\/to\/bundletool.jar build-apks –bundle=path\/to\/your-app.aab –output=path\/to\/output.apks<\/p>\n\n\n\n\u8fd9\u91cc\u6211\u653e\u4e00\u8d77\u4e86<\/p>\n\n\n\n<\/div><\/figure>\n\n\n\n
java -jar bundletool-all-1.15.4.jar build-apks –bundle=application-bd6e0190-4a05-4178-a1c8-7fec07da40d3.aab –output=MuXueBeauseYou.apks<\/p>\n\n\n\n
\u8fd9\u91cc\u5148\u4e0d\u8981\u8fd0\u884c\u8fd9\u4e2a\u547d\u4ee4<\/p>\n\n\n\n
\u5728\u8fd9\u4e2a\u76ee\u5f55cmd<\/p>\n\n\n\n
\n\u751f\u6210\u5bc6\u94a5\u5e93\u6587\u4ef6<\/strong>\uff1a\u4f60\u53ef\u4ee5\u4f7f\u7528keytool\u547d\u4ee4\u6765\u751f\u6210\u4e00\u4e2a\u65b0\u7684\u5bc6\u94a5\u5e93\u6587\u4ef6\u3002keytool\u662fJava Development Kit (JDK)\u7684\u4e00\u90e8\u5206\uff0c\u4f60\u5e94\u8be5\u5df2\u7ecf\u5728\u4f60\u7684\u7535\u8111\u4e0a\u5b89\u88c5\u4e86\u5b83\u3002\u5728\u4f60\u7684\u7ec8\u7aef\u4e2d\u8fd0\u884c\u4ee5\u4e0b\u547d\u4ee4\uff0c\u5176\u4e2dmy-release-key.jks\u662f\u4f60\u7684\u5bc6\u94a5\u5e93\u6587\u4ef6\u7684\u540d\u79f0\uff0calias_name\u662f\u4f60\u7684\u522b\u540d\uff0cpassword\u662f\u4f60\u7684\u5bc6\u7801\uff1a<\/li>\n<\/ol>\n\n\n\nkeytool -genkey -v -keystore my-release-key.jks -keyalg RSA -keysize 2048 -validity 10000 -alias alias_name<\/p>\n\n\n\n
\u6211\u8fd9\u91cckeytool -genkey -v -keystore muxuetianyin.jks -keyalg RSA -keysize 2048 -validity 10000 -alias muxue -storepass 123456 -keypass 123456 keytool -importkeystore -srckeystore muxuetianyin.jks -destkeystore muxuetianyin.p12 -deststoretype pkcs12 -srcstorepass 123456 -deststorepass 123456<\/p>\n\n\n\n
\u548c\u4e4b\u524d\u7684\u5bf9\u63a5\u8d77\u6765\u5b8c\u6574\u7684\u547d\u4ee4\u662fjava -jar bundletool-all-1.15.4.jar build-apks –bundle=application-bd6e0190-4a05-4178-a1c8-7fec07da40d3.aab –output=MuXueBeauseYou.apks –ks=muxuetianyin.jks –ks-key-alias=muxue –ks-pass=pass:123456 –key-pass=pass:123456<\/p>\n\n\n\n<\/div><\/figure>\n\n\n\n
\u8fd9\u91cc\u7b7e\u540d\u5931\u8d25\u4e86PS E:\\code\\project\\Because-Of-You> expo credentials:manager \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510 \u2502 \u2502 \u2502 The global expo-cli package has been deprecated. \u2502 \u2502 \u2502 \u2502 The new Expo CLI is now bundled in your project in the expo package. \u2502 \u2502 Learn more: https:\/\/blog.expo.dev\/the-new-expo-cli-f4250d8e3421. \u2502 \u2502 \u2502 \u2502 To use the local CLI instead (recommended in SDK 46 and higher), run: \u2502 \u2502 \u203a npx expo <command> \u2502 \u2502 \u2502 \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518 Accessing credentials for muxue in project Because-Of-You \u221a Select platform \u00bb android \u221a You are currently in a directory with @muxue\/Because-Of-You experience. Do you want to select it? … yes No credentials available for @muxue\/Because-Of-You experience. \u221a What do you want to do? \u00bb Update upload Keystore \u221a Would you like to upload a Keystore or have us generate one for you? If you don’t know what this means, let us generate it! \ud83d\ude42 \u00bb Generate new keystore Keystore updated successfully \u221a Do you want to quit Credential Manager \u00bb Quit Credential Manager<\/p>\n\n\n\n
\u91cd\u65b0\u5c1d\u8bd5<\/p>\n\n\n\n
\u8fd9\u91cc\u751f\u6210\u4e86\u4e00\u4e2a\u7b7e\u540d\u5e93\uff0c\u91cd\u65b0\u83b7\u53d6\u5230java -jar bundletool-all-1.15.4.jar build-apks –bundle=muxue.aab –output=MuXueBeauseYou.apks –ks=E:\\code\\project\\Because-Of-You\\Because-Of-You.jks –ks-key-alias=QG11eHVlL0JlY2F1c2UtT2YtWW91 –ks-pass=pass:8c931db2aeea4336a2eb83c5e0610296 –key-pass=pass:fc307b4d8034469199c3645dabb2e065<\/p>\n\n\n\n
\u5b89\u88c5java -jar bundletool-all-1.15.4.jar install-apks –apks=MuXueBeauseYou.apks<\/p>\n\n\n\n
\u5b89\u5353\u65e5\u5fd7\u6253\u5370adb logcat | grep com.example.myapp adb logcat *:S ReactNative:V ReactNativeJS:V<\/p>\n\n\n\n
\u53e6\u4e00\u79cd\u65b9\u6cd5(\u63a8\u8350)<\/h3>\n\n\n\n \u76f4\u63a5\u6253\u5305apk\u4e0b\u8f7d\uff0c\u8fd9\u662f\u8e29\u4e86\u4e00\u5806\u5751\u624d\u77e5\u9053\u7684<\/p>\n\n\n\n
\u9879\u76ee\u4e2d\u521b\u5efa\u4e00\u4e2aeas.json\u6587\u4ef6\uff08\u5982\u679c\u8fd8\u6ca1\u6709\u7684\u8bdd\uff09\uff0c\u7136\u540e\u6dfb\u52a0\u4e00\u4e2a\u65b0\u7684\u6784\u5efa\u914d\u7f6e\u3002\u4f8b\u5982\uff1a<\/p>\n\n\n\n
{ \"build\": { \"release\": { \"distribution\": \"store\", \"android\": { \"gradleCommand\": \":app:assembleRelease\" } } } }<\/code><\/code><\/pre>\n\n\n\n\u914d\u7f6e<\/p>\n\n\n\n
{ \"cli\": { \"version\": \">= 5.1.0\" }, \"build\": { \"development\": { \"developmentClient\": true, \"distribution\": \"internal\" }, \"preview\": { \"distribution\": \"internal\" }, \"production\": {}, \"release\": { \"distribution\": \"store\", \"android\": { \"gradleCommand\": \":app:assembleRelease\" } } }, \"submit\": { \"production\": {} } }<\/code><\/pre>\n\n\n\n\u8fd8\u8981\u5b89\u88c5\u51e0\u4e2a\u4e1c\u897f<\/p>\n\n\n\n
npm config set sharp_binary_host “https:\/\/npmmirror.com\/mirrors\/sharp” <\/p>\n\n\n\n
npm config set sharp_libvips_binary_host “https:\/\/npmmirror.com\/mirrors\/sharp-libvips”<\/p>\n\n\n\n
npm install -g sharp-cli <\/p>\n\n\n\n
yarn upgrade react-native-vector-icons@latest<\/p>\n\n\n\n
ios\u6253\u5305<\/h2>\n\n\n\n \u8fd9\u4e2a\u6709\u70b9\u9ebb\u70e6\u4e86\uff0c\u9700\u8981\u7533\u8bf7\u5f00\u53d1\u8005\u8fd8\u8981\u4ed8\u8d39\u4e00\u4e0b<\/p>\n\n\n\n
\u9700\u8981\u56e2\u961f\u652f\u6301\u624d\u80fd\u4e0a\u82f9\u679c\u5546\u5e97<\/p>\n\n\n\n
\u5728\u8fd9\u91cc\u7533\u8bf7<\/p>\n","protected":false},"excerpt":{"rendered":"
\u8bbe\u8ba1\u4e00\u4e2aReact Native\u5e94\u7528\u9700\u8981\u8003\u8651\u5f88\u591a\u56e0\u7d20\uff0c\u5305\u62ec\u5e94\u7528\u7684\u529f\u80fd\u3001\u7528\u6237\u754c\u9762\u3001\u6570\u636e\u7ba1\u7406\u3001\u72b6\u6001\u7ba1\u7406\u3001\u8def\u7531\u7ba1\u7406\u3001 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[1],"tags":[],"_links":{"self":[{"href":"https:\/\/www.muxuetianyin.cn\/index.php?rest_route=\/wp\/v2\/posts\/526"}],"collection":[{"href":"https:\/\/www.muxuetianyin.cn\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.muxuetianyin.cn\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.muxuetianyin.cn\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.muxuetianyin.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=526"}],"version-history":[{"count":5,"href":"https:\/\/www.muxuetianyin.cn\/index.php?rest_route=\/wp\/v2\/posts\/526\/revisions"}],"predecessor-version":[{"id":555,"href":"https:\/\/www.muxuetianyin.cn\/index.php?rest_route=\/wp\/v2\/posts\/526\/revisions\/555"}],"wp:attachment":[{"href":"https:\/\/www.muxuetianyin.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=526"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.muxuetianyin.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=526"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.muxuetianyin.cn\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=526"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
![\"\"](\"https:\/\/www.muxuetianyin.cn\/wp-content\/uploads\/2023\/09\/image-3.png\")
<\/div><\/figure>\n\n\n\n![\"\"](\"https:\/\/www.muxuetianyin.cn\/wp-content\/uploads\/2023\/09\/image-4.png\")
<\/div><\/figure>\n\n\n\n![\"\"](\"https:\/\/www.muxuetianyin.cn\/wp-content\/uploads\/2023\/09\/image-5.png\")
<\/div><\/figure>\n\n\n\n![\"\"](\"https:\/\/www.muxuetianyin.cn\/wp-content\/uploads\/2023\/09\/image-6.png\")
<\/div><\/figure>\n\n\n\n![\"\"](\"https:\/\/www.muxuetianyin.cn\/wp-content\/uploads\/2023\/09\/image-7.png\")
<\/div><\/figure>\n\n\n\n![\"\"](\"https:\/\/www.muxuetianyin.cn\/wp-content\/uploads\/2023\/09\/image-8.png\")
<\/div><\/figure>\n\n\n\n![\"\"](\"https:\/\/www.muxuetianyin.cn\/wp-content\/uploads\/2023\/09\/image-9.png\")
<\/div><\/figure>\n\n\n\n![\"\"](\"https:\/\/www.muxuetianyin.cn\/wp-content\/uploads\/2023\/09\/image-10.png\")
<\/div><\/figure>\n\n\n\n![\"\"](\"https:\/\/www.muxuetianyin.cn\/wp-content\/uploads\/2023\/09\/image-11.png\")
<\/div><\/figure>\n\n\n\n![\"\"](\"https:\/\/www.muxuetianyin.cn\/wp-content\/uploads\/2023\/09\/image-12.png\")
<\/div><\/figure>\n\n\n\n![\"\"](\"https:\/\/www.muxuetianyin.cn\/wp-content\/uploads\/2023\/09\/image-13.png\")
<\/div><\/figure>\n\n\n\n![\"\"](\"https:\/\/www.muxuetianyin.cn\/wp-content\/uploads\/2023\/09\/image-14.png\")
<\/div><\/figure>\n\n\n\n![\"\"](\"https:\/\/www.muxuetianyin.cn\/wp-content\/uploads\/2023\/09\/image-15.png\")
<\/div><\/figure>\n\n\n\n![\"\"](\"https:\/\/www.muxuetianyin.cn\/wp-content\/uploads\/2023\/09\/image-16.png\")
<\/div><\/figure>\n\n\n\n![\"\"](\"https:\/\/www.muxuetianyin.cn\/wp-content\/uploads\/2023\/09\/image-17.png\")
<\/div><\/figure>\n\n\n\n![\"\"](\"https:\/\/www.muxuetianyin.cn\/wp-content\/uploads\/2023\/09\/image-18-1024x524.png\")
<\/div><\/figure>\n\n\n\n![\"\"](\"https:\/\/www.muxuetianyin.cn\/wp-content\/uploads\/2023\/09\/image-19-1024x539.png\")
<\/div><\/figure>\n\n\n\n![\"\"](\"https:\/\/www.muxuetianyin.cn\/wp-content\/uploads\/2023\/09\/image-20.png\")
<\/div><\/figure>\n\n\n\n![\"\"](\"https:\/\/www.muxuetianyin.cn\/wp-content\/uploads\/2023\/09\/image-21.png\")
<\/div><\/figure>\n\n\n\n![\"\"](\"https:\/\/www.muxuetianyin.cn\/wp-content\/uploads\/2023\/09\/image-22-1024x358.png\")
<\/div><\/figure>\n\n\n\n