日常踩坑

react-native版本0.81，create-react-native-library版本0.54.3
按照官方文件执行

```bash
npx create-react-native-library@latest --local
```
执行完成后，直接运行项目会报错

```js
The NODE_ENV environment variable is required but was not specified. Ensure the project is bundled with Expo CLI or NODE_ENV is set. Using only .env.local and .env
e: file:///D:/tc_project/physical_ytj_app/modules/test-module/android/src/main/java/com/testmodule/TestModuleModule.kt:6:23 Unresolved reference 'specs'.
e: file:///D:/tc_project/physical_ytj_app/modules/test-module/android/src/main/java/com/testmodule/TestModuleModule.kt:10:3 Unresolved reference 'NativeTestModuleSpec'.
e: file:///D:/tc_project/physical_ytj_app/modules/test-module/android/src/main/java/com/testmodule/TestModuleModule.kt:12:3 'getName' overrides nothing.
e: file:///D:/tc_project/physical_ytj_app/modules/test-module/android/src/main/java/com/testmodule/TestModuleModule.kt:18:3 'multiply' overrides nothing.
```

### 解决方案
1.在module.kt文件中添加代码

```kt
import com.facebook.fbreact.specs.NativeTestModuleSpec
```

2.在module.kt中添加代码并配置模块中的package.json

```js
import com.testmodule.NativeTestModuleSpec

"codegenConfig": {
    "name": "TestModuleSpec",
    "type": "modules",
    "jsSrcsDir": "src",
    "android": {
       // 这里指定java包名
       "javaPackageName": "com.testmodule"
     }
  },
```

使用create-react-native-library创建项目本地turboModules构建报错

经验记录

1. 前端录屏功能
- 使用rtcRecorder对视频流进行录制。
- 指定区域录制，使用canvas对视频帧进行截取，然后录制canvas流。
- 录屏功能electron应用中实现。

```js
// 主进程中使用desktopCapturer
  session.defaultSession.setDisplayMediaRequestHandler(
    (_, callback) => {
      desktopCapturer.getSources({ types: ['window'] }).then((sources) => {
        // Grant access to the first screen found.
        callback({ video: sources[0], audio: 'loopback' })
      })
      // If true, use the system picker if available.
      // Note: this is currently experimental. If the system picker
      // is available, it will be used and the media request handler
      // will not be invoked.
    },
    { useSystemPicker: true }
  )
  
// 渲染进程中
export const useDisplayMedia = (options: UseDisplayMediaOptions) => {
  const { onStream } = options
  const [stream, setStream] = useState<MediaStream | null>(null)
  const streamRef = useRef<MediaStream | null>(null)
  const onStreamRef = useRef(onStream)

  useEffect(() => {
    navigator.mediaDevices
      .getDisplayMedia({
        audio: true,
        video: {
          width: { ideal: 1920 },
          height: { ideal: 1080 },
          frameRate: { ideal: 60, max: 60 }
        }
      })
      .then((mediaStream) => {
        streamRef.current = mediaStream
        setStream(mediaStream)
        onStreamRef.current?.(mediaStream)
        // 打印实际分辨率
        const track = mediaStream.getVideoTracks()[0]
        console.log('实际分辨率:', track.getSettings())
      })
      .catch((e) => {
        console.error('获取媒体流失败:', e)
      })

    return () => {
      if (streamRef.current) {
        streamRef.current.getTracks().forEach((track) => track.stop())
      }
    }
  }, [])

  return {
    stream
  }
}
```

最近项目中的新接触

1.gradle下载不动需要开启代理，开启代理后在`/android/gradle.properties`文件中增加以下代码

```
systemProp.http.proxyHost=127.0.0.1
systemProp.http.proxyPort=7890
systemProp.https.proxyHost=127.0.0.1
systemProp.https.proxyPort=7890
```

2.yarn android启动项目报错信息"Could not move temporary workspace"
使用 `npx react-native run-android` 命令替换 `yarn android` 启动项目
[issues28475](https://github.com/gradle/gradle/issues/28475)


react-native@0.75.1新项目启动时gradle下载不动和“Could not move temporary workspace”问题.

- 由原来直接引入autoUpdater改为引入DebUpdater在创建autoUpdater实例。

```ts
// import { autoUpdater } from 'electron-updater';
import { DebUpdater } from 'electron-updater';

const autoUpdater = new DebUpdater({
  provider: 'generic',
  url: 'http://172.20.0.6:5173'
})

autoUpdater.checkForUpdatesAndNotify();
```

electron-forge结合electron-updater实现在linux系统中.deb包的自动更新功能

1.设置更新源

```js
import { autoUpdater } from 'electron-updater';

autoUpdater.setFeedURL({
  provider: 'generic',
  // 更新源地址
  url: 'http://127.0.0.1:5173'
});
```

- 服务端需要返回一个latest.yml文件

```yml
# HTTP GET http://127.0.0.1:5173/latest.yml
version: 1.0.2
files:
  url: http://localhost:5173/healthybd-ytj-1.0.0-Setup.exe
sha512: 5ca8d0f2e2440782d1e2f7dcb081a65430e1571a9e764c3fc74f034944499afb0422b5ffb755274f866902e0d04f8acb7e073dfc43c452de9f8566199dd1368b
path: http://localhost:5173/healthybd-ytj-1.0.0-Setup.exe

```
2.检测更新

```js
import { autoUpdater } from 'electron-updater';

autoUpdater.autoDownload = true;
autoUpdater.checkForUpdatesAndNotify()
```

## 注意事项
1. 开发环境调式需要设置`autoUpdater.forceDevUpdateConfig = true`
2. 开发环境调试需要在项目根目录下创建一个**dev-app-update.yml**文件
```yml
# dev-app-update.yml
provider: generic
updaterCacheDirName: demo-updatar
```
3. 应用安装后根目录下**resources**文件夹中必须要有一个**app-update.yml**文件
    1. 在项目根目录下创建一个**app-update.yml**文件（同dev-app-update.yml）
    2. 通过在**forge.config.ts**配置文件中配置额外的资源文件

```js
const config: ForgeConfig = {
  packagerConfig: {
    extraResource: ['./app-update.yml'],
  },
 }
```



electron-forge结合electron-updater实现自动更新功能

window10系统，android studio中动过SDK版本后，yarn android无法自动启动模拟器。
https://github.com/facebook/react-native/issues/43320#issuecomment-2011072921

rn项目yarn andoird无法自动打开模拟器问题

周六(2024-03-09)凌晨5点多吧快天亮了，被一条邮箱信息吵醒了，迷迷糊糊打开手机看了一眼，planetScale发来的，一开始以为是数据库长时间没用冻结之类的，点进去结果发现是免费数据库停止服务的提醒。

开始着手数据迁移，先是找到vercel一个免费的256mb postgres数据库，但是数据迁移不太顺利，首先是navicat连接数据库要16以上的版本，或者要修改libcc.dll文件，存在无法备份数据问题（未解决），数据迁移还存在自增id问题，导致无法插入新数据。

后来发现社区推荐的tidbcloud也能免费，而且是 5g5个集群，等于25g！！！
迁移过程也很顺利！！！

planetScale数据库不能白嫖了！迁移至tidbcloud

生活杂谈

蒜第二季还要多久呢

nextjs都更新到14了，要不等蒜第二季出了重构一下博客~~~

技术栈也多了个react-native

dota2太久没玩重新定位到统帅了，虽然前段时间打回了超凡，冠绝还有点遥远。。。开黑班子也散了~~~~



快一年了~~~~

PC硬件

## 配置列表
- cpu: i5-12600kf
- 主板: 华硕b660m 重炮手 ddr4
- 内存: 光威8g*2 3600
- 固态: 西数SN770 1T
- 电源: 长城750w 金牌全模组
- 散热: 瓦尔基里 c240w
- 机箱：半岛铁盒w3
- 显卡: 旧的750ti 等40系

## 装机遇到的问题和解决
只要接了任意usb设备就不能进入bios。未装系统情况下直接黑屏；已装系统情况下，能进系统，开机按f2进bios直接黑屏。

经过排查，怀疑是750ti或其使用的显示器连接线缆兼容性问题导致的。解决办法就是不接任何usb设备后进入bios，开启csm兼容。

记录下装机踩坑

## 需求描述
开发一个在线聊天功能，打开会话时，消息内容容器固定高度，当消息列表数量超过内容容器高度时，出现滚动条，并且滚动条默认在最下方。

## 实现方案
### 1. 列表正常渲染，通过js控制滚动逻辑
这种方法最好理解和比较简单，通过调用dom的api让滚动条滚动到最底部即可。但是会存在一个小问题，当消息列表数据更新时，有概率滚动条会从顶部瞬间移动到底部，会造成一种像闪屏的感觉。 可以在切换会话时设置opacity为0，消息列表渲染完成后再设置回1来解决。
> react例子
```ts
// 判断是否进行滚动到底部
const isReacthBottom = useRef(true);

useEffect(() => {
    isReacthBottom.current = true;
}, [sessionName]);

// 当列表数据发生改变时，手动让滚动条滚动到最下方
useEffect(() => {
    if (isReacthBottom.current) {
      wrapperRef.current!.scroll({ top: wrapperRef.current!.scrollHeight });
    }
}, [list]);

// 参考微信PC端，当前会话如果往上滚动了，有新消息来不进行滚动
useEffect(() => {
    const fn = () => {
      if (
        wrapperRef.current!.scrollTop + wrapperRef.current!.clientHeight ===
        wrapperRef.current!.scrollHeight
      ) {
        isReacthBottom.current = true;
      } else {
        isReacthBottom.current = false;
      }
    };
    wrapperRef.current!.addEventListener('scroll', fn);

    return () => {
      // eslint-disable-next-line react-hooks/exhaustive-deps
      wrapperRef.current!.removeEventListener('scroll', fn);
    };
}, []); 
  
  // 参考dom结构
  <div className="online-chat-content">
      <div className="header">{sessionName}</div>
      <div className="content" ref={wrapperRef}>
        {list.map((message, i, mapArray) => {
          const img = message.position === 'left' ? logo : avatar;
          const showTime =
            i === 0 || isTwoTimeDiffGt5Minutes(mapArray[i].time, mapArray[i - 1].time);

          return (
            <div key={message.id} className="content-item" style={{ opacity: showMsg ? 1 : 0 }}>
              {showTime && (
                <div className="content-time">
                  <span>{moment(message.time).format('YYYY-MM-DD HH:mm:ss')}</span>
                </div>
              )}
              <div
                className={cn(['content-message', message.position])}
              >
                <img width={30} src={img} alt="" />
                <div className="message">{message.content}</div>
              </div>
            </div>
          );
        })}
      </div>
    </div>
```

### 2. 通过flex-direction: column-reverse 解决
这种方法可以让滚动条默认从下往上，但是有浏览器兼容性问题，部分浏览器会出现content容器无法滚动的问题，并且还需要对渲染的列表数据进行reverse反转。

> 参考dom结构
```html
<div class="content">
    <div class="message-item">1</div>
    <div class="message-item">2</div>
    <div class="message-item">3</div>
</div>
```
> css代码

```css
.content {
    display: flex;
    flex-direction: column-reverse;
    /** 
    * 为什么要使用max-height？
    * 因为当消息列表数据不足以形成滚动条时，消息会从下往上渲染，max-height可以完美解决
    */ 
    max-height: 500px;
    overflow-y: auto;
}
.message-item {
    height: 300px;
    flex-shrink: 0;
    flex-grow: 0;
}
```

### 3. 通过 transform 反转来解决 (目前我项目中使用的方法)
方法2的上位替代，主要使content容器进行翻转，然后使里面的message容器再翻转一次（回正）。
> 参考dom结构

```html
<div class="content">
    <div class="message-item">1</div>
    <div class="message-item">2</div>
    <div class="message-item">3</div>
</div>
```
> 参考css代码

```css
.content {
    max-height: 500px;
    overflow-y: auto;
    transform: scale(1, -1);
}
.message-item {
    height: 300px;
    transform: scale(1, -1);
}
```
**此种方法可以很简单的内容从下往上渲染，但是需要将列表数据reverse反转，并且由于content容器反转了，导致滚动条滚动方向反过来了，需要通过几行js代码来解决。**
> 参考js代码

```js
const fn = (e) => {
  if (e.deltaY) {
    e.preventDefault();
    e.currentTarget.scrollTop -=
      parseFloat(getComputedStyle(e.currentTarget).getPropertyValue('font-size')) *
      (e.deltaY < 0 ? -1 : 1) *
      3;
  }
};
const content = document.querySelector('.content')
content.addEventListener('wheel', fn)
```

开发聊天室功能，聊天消息滚动默认从下往上的问题探讨

# 手动更新
- 使用router.push跳转不会马上看到revalidate更新结果，需要手动刷新页面。而使用Link标签可以立马看到更新结果。
- 页面revalidate后，如果Link跳转页面时携带query参数，会导致不能立马看到更新结果，需要手动刷新页面才能看到更新内容。
- 使用postman调用revalidate可以更新吗？可以，但是与请求的地址有没有www有关系，可以在vercel配置域名无www的时候重定向到有www。与http协议无关。

# 自动更新
简单总结就是在请求一个页面之后，当时间超出revalidate设定的值，下一次请求该页面的内容将会更新。
> [参考链接](https://reactions-demo.vercel.app/)


nextjs中Incremental Static Regeneration踩到的坑！

前端技术

## 注入参数

```ts
// 向组件注入primaryColor: 'pink'参数
interface WithThemeProps {
    primaryColor: string
}

export function withTheme<T>(WrappedComponent: React.ComponentType<T & WithThemeProps>) {
    // Try to create a nice displayName for React Dev Tools.
    const displayName = WrappedComponent.displayName || WrappedComponent.name || 'Component'

    // Creating the inner component. The calculated Props type here is the where the magic happens.
    const ComponentWithTheme = (props: Omit<T, keyof WithThemeProps>) => {
        // Fetch the props you want to inject. This could be done with context instead.
        const themeProps = {
            primaryColor: 'pink',
        }
        // props comes afterwards so the can override the default ones.
        return <WrappedComponent {...themeProps} {...(props as T)} />
    }

    ComponentWithTheme.displayName = `withTheme(${displayName})`

    return ComponentWithTheme
}
```

## 增强参数

```ts
// 给组件增加loading参数
interface EnchanceProps {
    loading: boolean
}

const enchanceLoading = <T extends {}>(WrappedComponent: React.ComponentType<T>) => {
    const ComponentWithLoading = (props: T & EnchanceProps) => {
        const { loading } = props

        return loading ? <div>loading.....</div> : <WrappedComponent {...props} />
    }

    return ComponentWithLoading
}
```

## 注入和增强使用

```ts
const A = (props: { a?: string } & WithThemeProps) => {
    return <div>{props.primaryColor}</div>
}

const AwithTheme = withTheme(A)

const LoadingA = enchanceLoading(AwithTheme)

const B = () => {
    return <LoadingA loading={true}></LoadingA>
}
```

React高阶组件之注入和增强使用示例

1、 打开巴哈网站
2、 按F12打开控制台复制下面代码到控制台，按回车。**(代码最后一行30868改为你要下载弹幕的视频地址上"sn="后面那串数字)**
3、 等待片刻，控制台会输出一串xml字符串，点击copy复制。
4、 电脑上新建一个.txt文件，粘贴xml字符串进入，删掉开头和结尾的引号。
5、 修改后缀名为.xml，打开弹弹play导入弹幕即可。

```js
function domToStirng(dom) {
    const div = document.createElement('div')
    div.appendChild(dom)
    return div.innerHTML
}

const getDmXml = async (sn) => {
    const formData = new FormData()
    formData.append('sn', sn)

    const res = await fetch('https://ani.gamer.com.tw/ajax/danmuGet.php', {
        method: 'POST',
        body: formData,
    }).then((res) => res.json())

    const dList = res
    let i = `<i xmlns:xsp="http://www.w3.org/2001/XMLSchema" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"><chatserver>chat.bilibili.com</chatserver><chatid>10000</chatid><mission>0</mission><maxlimit>8000</maxlimit><source>e-r</source><ds>931869000</ds><de>937654881</de><max_count>8000</max_count>`

    dList.forEach((item) => {
        let d = document.createElement('d')
        d.setAttribute('p', `${item.time / 10},1,25,16777215,1659830799719,0,0,0`)
        d.innerText = item.text
        i += domToStirng(d)
    })

    i += '</i>'

    return (`<?xml version="1.0"?>` + i).replaceAll('<br>', '')
}
// 下面30868改为你要下载弹幕的视频地址上"sn="后面那串数字
await getDmXml('30868')

```

临时解决巴哈弹幕无法获取的问题（需要梯子能进入巴哈网站）

【LycoReco】 next.js开发个人博客过程中笔记

【LycoReco】 next.js开发个人博客中遇到的坑！

测试

---
# frontmatter: https://jekyllrb.com/docs/front-matter/
layout: post
title: Blogging Like a Hacker
---

## Markdown Basic Syntax

I just love **bold text**. Italicized text is the _cat's meow_. At the command prompt, type `nano`.

My favorite markdown editor is [ByteMD](https://github.com/bytedance/bytemd).

1. First item
2. Second item
3. Third item

> Dorothy followed her through many of the beautiful rooms in her castle.

```js
import { Editor, Viewer } from 'bytemd'
import gfm from '@bytemd/plugin-gfm'

const plugins = [
  gfm(),
  // Add more plugins here
]

const editor = new Editor({
  target: document.body, // DOM to render
  props: {
    value: '',
    plugins,
  },
})

editor.on('change', (e) => {
  editor.$set({ value: e.detail.value })
})
```

## GFM Extended Syntax

Automatic URL Linking: https://github.com/bytedance/bytemd

~~The world is flat.~~ We now know that the world is round.

- [x] Write the press release
- [ ] Update the website
- [ ] Contact the media

| Syntax    | Description |
| --------- | ----------- |
| Header    | Title       |
| Paragraph | Text        |

## Footnotes

Here's a simple footnote,[^1] and here's a longer one.[^bignote]

[^1]: This is the first footnote.
[^bignote]: Here's one with multiple paragraphs and code.

    Indent paragraphs to include them in the footnote.

    `{ my code }`

    Add as many paragraphs as you like.

## Gemoji

Thumbs up: :+1:, thumbs down: :-1:.

Families: :family_man_man_boy_boy:

Long flags: :wales:, :scotland:, :england:.


## Mermaid Diagrams

```mermaid
graph TD;
  A-->B;
  A-->C;
  B-->D;
  C-->D;
```
