APP开发尝试

安装expo

请按官方文档指示进行~

---

安装gluestack-ui

请按官方文档指示进行·~

遇到问题可以查看《全栈开发之路》里面有一些简单问题的解决方法，（当然，也可以不使用，我懒得安装tailwindcss，所以就干脆用这个）

---

样式使用

不知道为什么，好像移动端的开发和web开发有点不太一样，同样的写法甚至不能让元素居中，估计需要不断尝试摸索了

• 居中元素似乎需要使用text-center

---

制作加载页面（Splash Screen）

在 React Native 中，可以使用 react-native-splash-screen 库来实现加载页面

安装依赖：

npm install react-native-splash-screen

呃，(⊙o⊙)…

好像直接在app.json文件里面调整就可以了，我觉得看起来也挺不错的，就先这样吧，以后再看看需不需要调整

{
  "expo": {
    "splash": {
      "image": "./assets/splash-screen-logo.png",  // Path to your splash screen image
      "resizeMode": "contain",  // Use "cover" for full-screen or "contain" for fit
      "backgroundColor": "#ffffff"  // Background color for the splash screen
    }
  }
}

---

制作未寻找到页面(ps:虽然感觉用不上)

在根目录下创建+not-found.tsx文件，然后…没了

---

使用Stack

<Stack>
    <Stack.Screen name="index" options={{ headerShown: false }} />
    <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
    <Stack.Screen name="+not-found" />
</Stack>

这里我遇到一个警告Layout children must be of type Screen, all other children are ignored. To use custom children, create a custom <Layout />.，我试了半天之后好像是stack之间只能有screen

---

使用Tabs

我创建了一个(tabs)文件夹，然后在_layout.tsx中进行简单的设置尝试

import { Tabs } from "expo-router";
import Ionicons from '@expo/vector-icons/Ionicons';

const TabLayout = () => {
  return (
    <Tabs>
      <Tabs.Screen 
        name="dashboard"
        options={{ 
          title: "dashboard",
          tabBarIcon: () => <Ionicons name="person" size={24} />,
        }} 
      />
      <Tabs.Screen
      name="settings" 
      options={{ 
        title: "settings",
        tabBarIcon: () => <Ionicons name="settings" size={24} />,
        }} 
      />
    </Tabs>
  );
};

export default TabLayout;

然后我按照AI的说法进行了一些修改

<Tabs 
      screenOptions={({ route }) => ({
        tabBarActiveTintColor: "black",
        tabBarInactiveTintColor: "gray",
        tabBarStyle: {
          backgroundColor: "white",
        },
        // tabBarShowLabel: false,
        tabBarLabelStyle: {
          fontSize: 12,
          fontWeight: "bold",
        },
        tabBarIcon: ({ focused, color, size}) => {
          let iconName: keyof typeof Ionicons.glyphMap = "home";//防止类型检查

          if(route.name === 'welcome') {
            iconName = focused ? 'home' : 'home-outline';
          } else if(route.name === 'dashboard') {
            iconName = focused ? 'person' : 'person-outline';
          } else if(route.name === 'settings') {
            iconName = focused ? 'settings' : 'settings-outline';
          }

          return <Ionicons name={iconName} size={size} color={color} />;
        },
      })}
    >
      <Tabs.Screen 
        name="welcome" 
        options={{ 
          title: "welcome",
        }} 
      />
      <Tabs.Screen 
        name="dashboard"
        options={{ 
          title: "主页",
        }} 
      />
      <Tabs.Screen
        name="settings" 
        options={{ 
          title: "设置",
        }} 
      />
    </Tabs>

这样看起来确实还可以

为了使得用户的消息栏看起来清晰可见，我们使用status bar，注意这里不是react-native的StatusBar，使用npx expo install expo-status-bar安装

import { StatusBar } from 'expo-status-bar'; 
	<>
      	<StatusBar style="auto" translucent={false} backgroundColor="transparent" />
		<Tabs>
		</Tabs>
    </>

（PS：注意这里有个小错误，需要加上import React from "react"）

---

使用AsyncStorage存储信息

安装npm install @react-native-async-storage/async-storage

…之后请查看文档叭

---

(PS: 一些开发提示)

• 似乎有些tailwindcss的样式在app开发中不生效，比如items-center就总是不生效，所以这个时候还是选择原生态的css样式吧，别硬耗浪费时间了：)
• router.push用来跳转
• Modal一般用来做Dialog遮罩层
• KeyboardAvoidingView一般用来防止键盘影响布局

---

尝试使用react-native-geolocation-service

好消息——应该成功了

坏消息——在冲国用不了

所以现在白写了这么多的代码去都要重写，fucking shit！！！

然后去看了眼高德和腾讯，文档和接口都没怎么写，真是噩梦了

没办法了，生活还得继续，只能花时间搞了。

---

为使用缺德地图定位而做的努力

缺德地图的应用添加key需要三个东西：发布版安全码SHA1，调试版安全码SHA1，还有packageName

• 获取packageName：

  • 因为使用的是Expo开发的app，所以根据Expo的官方文档，使用命令npx expo prebuild,之后会生成本地的原生项目，然后我们可以在文件build.gradle中找到packageName

  • 在 android/app/build.gradle 中，可以找到类似以下的配置：

    android {
        defaultConfig {
            applicationId "com.yourcompany.yourapp" //这个就是packageName
        }
    }

• 获取调试版安全码SHA1：

  • 这里需要使用工具keytool，keytool 是 JDK 的一部分，JDK（Java Development Kit）是一个开发 Java 应用程序的工具包，keytool 是其中的一个组件。只要安装了 JDK，keytool 就已经包含在其中。

  • （附录）

    步骤 1：下载并安装 JDK

    1. 下载 JDK：
       • 访问 Oracle 官方 JDK 下载页面（或根据需要选择其他版本），选择适合你操作系统的 JDK 版本。
       • 你也可以选择 OpenJDK，它是开源版本，下载地址为 AdoptOpenJDK。
    2. 安装 JDK：
       • 下载完成后，运行安装程序并按照提示完成安装。
       • 安装路径通常是 C:\Program Files\Java\jdk-<version>（Windows）
    3. 设置环境变量：
       • Windows：
         1. 右键点击桌面上的 “此电脑”（或者 “计算机”）图标，选择 “属性”。
         2. 选择 “高级系统设置”，点击 “环境变量”。
         3. 在 “系统变量” 中，点击 “新建”，添加一个名为 JAVA_HOME 的变量，值为 JDK 安装路径，例如：C:\Program Files\Java\jdk-15.
         4. 找到并选择 Path 变量，点击编辑，添加 JDK 的 bin 文件夹路径，例如：C:\Program Files\Java\jdk-15\bin。

  • 我们需要读取文件debug.keystore，默认情况下，debug.keystore 是 Android Studio 在首次构建项目时自动创建的密钥库文件。如果你没有在 Android Studio 中创建或构建过项目，那么这个文件就可能不存在。

  • 解决方法：

    • 确保你已经通过 Android Studio 创建了一个项目，并构建过一次项目（即生成了 APK）。这样，debug.keystore 文件就会自动创建。

    • 如果你没有使用 Android Studio，可以手动创建一个debug.keystore

      文件，方法如下：

      1. 打开命令行或终端。

      2. 使用以下命令手动创建debug.keystore：

         keytool -genkeypair -v -keystore %USERPROFILE%\.android\debug.keystore -keyalg RSA -keysize 2048 -validity 10000 -alias androiddebugkey -storepass android -keypass android

      3. 该命令将会创建一个新的 debug.keystore 文件，并指定密码为 android。

      4. 这里创建的最后输入y确定

  • 使用命令获取调试版SHA-1密钥：

  • keytool -list -v -keystore "%USERPROFILE%\.android\debug.keystore" -alias androiddebugkey -storepass android -keypass android
    * 获取发布版安全码SHA1：
    
      * 如果没有 `release.keystore` 文件，需要创建一个新的 **发布版密钥库**`release.keystore`，然后使用它来签署你的应用并获得发布版的 **SHA1**。以下是生成和使用 `release.keystore` 的步骤：
    
        #### 1.创建 `release.keystore` 文件
    
        你可以使用 `keytool` 来生成一个新的密钥库文件（`release.keystore`）。请按以下步骤操作：
    
        #### 命令行生成 `release.keystore` 文件：
    
        ```bash
        keytool -genkeypair -v -keystore /path/to/your/release.keystore -keyalg RSA -keysize 2048 -validity 10000 -alias yourAlias -storepass yourStorePassword -keypass yourKeyPassword
    
    - `/path/to/your/release.keystore`：你希望保存 `release.keystore` 文件的位置。
    - `yourAlias`：为密钥库选择一个别名（通常是一个描述性的名字，比如 `myapp`）。
    - `yourStorePassword`：密钥库的密码（请记住这个密码）。
    - `yourKeyPassword`：密钥（别名）的密码（也请记住这个密码）。
    
    该命令将生成一个新的密钥库文件 `release.keystore`，你将在发布版签名时使用它。
    
    ### 2. 获取发布版的 **SHA1**
    
    一旦你生成了 `release.keystore` 文件，你可以使用 `keytool` 来查看其 **SHA1** 指纹，方法如下：
    
    keytool -list -v -keystore /path/to/your/release.keystore -alias yourAlias -storepass yourStorePassword -keypass yourKeyPassword
    
    - `/path/to/your/release.keystore`：你刚刚生成的 `release.keystore` 文件的路径。
    - `yourAlias`：你在生成密钥库时设置的别名。
    - `yourStorePassword`：密钥库的密码。
    - `yourKeyPassword`：密钥的密码。
    

到这里就获得了这几个东西了，之后我会尝试开始使用对应的API。

---

项目宣告破产o(╥﹏╥)o

经过我的不懈尝试，我还是没能初始化，我认为目前我已经找不到任何继续这个项目的办法，所以这个项目是报废了

——shit一样的冲国开发环境