Music Free ios 开发问题记录

[zhuguibiao]

Music Free ios 开发问题记录

开发环境

按react-native@0.69官网搭建ios开发环境

我这边的开发环境：

• 代码库版本：2022.10.30 v0.0.1-alpha.7
• react-native-cli: 2.0.1
• react-native: 0.69.6
• yarn: 1.22.19
• ruby: 2.7.5
• cocoapods: 1.11.3
• node: 16.17.0
• xcode: 14

开始

yarn install
cd ios && pod install
npx react-native start

# simulator 是你ios的模拟器版本
npx react-native run-ios --simulator='iPhone 14 Pro'

样式问题

1. textAlignVertical: 'center'只支持安卓，不支持ios，需要用lineHeight替代
2. 运行到模拟器的时候，可能会出现icon找不到，参考react-native-vector-icons

ios卡片切换背景

由于ios默认卡片动画，在切换下一个card的过程中会显示前一个card，使得滑动看起来很奇怪

解决思路：

1. 每个路由页面里面添加背景色或图片
2. 使用react-navigation/native，自定义你想要的切换动画

播放问题

问题及解决方案：

1. 在src/core/musicQueue.ts 399行

   await TrackPlayer.add([track, getFakeNextTrack()]);
   // getFakeNextTrack 方法返回值
   if (track) {
       return produce(track, _ => {
           _.url = '';
       });
   } else {
       return { url: ''};
   }

• 调用TrackPlayer.add方法，ios版本url必须有值，不能为空，所以播放失败，可以使用

  if (!!LocalMusicSheet.isLocalMusic(track) && !track.url) {
      // 本地音乐url 处理
      return produce(track, _ => {
           _.url = _?.$?.localPath || '';
          // 自动下一首歌标记
          _.nextPalySign = 1;
      });
  }
  // 其他音频url
  return produce(track, _ => {
      _.nextPalySign = 1;
  });
  // 104行的事件里面判断改成
  !(await TrackPlayer.getTrack(evt.nextTrack))?.nextPalySign

2. ios后台播放需要自己开启支持react-native-track-player

文件权限

• 由于react-native-documente-picker选择的外部文件，只能在当前app的生命周期使用，重新打开的时候没有

• 引用 UIDocumentPickerViewController apple开发文档 里面的话在 iOS13 中，用户可以使用. 文档选择器返回目录的安全范围 URL，允许您的应用访问其容器外的内容。在这种情况下，URL 允许您的应用程序递归地访问目录及其所有内容，包括访问您将来添加到目录中的任何新项目。你的应用甚至可以为这个 URL 保存一个书签，让它在下次启动时访问该目录。

解决思路：

1. 因为自己使用（就是懒），我是把需要导入的音乐文件放到app文件夹内就可以访问
2. 添加书签方案
3. 虽然文件看不到，但是react-native-track-player可以播放，可以从媒体路径这方面下手
4. 等@maotoumao 开发，哈哈~~~

后续

后续可以跟着@maotoumao 大佬主版本开发，完~

[maotoumao]

感谢分享ios打包经验~~~ ☺

[yong-s]

期待大佬把iOS做大做强

[hoochanlon]

现在各家平台的版权保护真鸡巴严，会不会引起版权问题的警告啊，有点担心.jpg

[wencyGit]

看了源码，一时没看懂歌词滚动到对应歌词的逻辑，能否指明一下呢😅
@maotoumao

[zhuguibiao]

看了源码，一时没看懂歌词滚动到对应歌词的逻辑，能否指明一下呢😅 @maotoumao

歌词一般格式是时间加歌词，比如：[00:06.00]爱我还是他，歌曲播放到这个6s这个时间点，匹配到对应时间歌词position，然后滚过去啦～

[wencyGit]

@zhuguibiao 在demo中已经基本能滚动，就是看你的项目中FlatList有很多参数，因为我是后端的，目前没怎么看懂有啥用。后面在慢慢摸索😂

[maotoumao]

@wencyGit

@zhuguibiao 说的没错～ 主要是在这里（src/pages/musicDetail/components/content/lyric.tsx）：

当lyric变动的时候，通过列表的scrollToIndex滚动到对应index的歌词项；

有些地方写的不是很好😂，有啥觉得不合逻辑的提issue就行

[qiupo]

不关心ui问题，打包出来还是能用的，改成ipa自签一下就能用
musicFree.zip

[sgr997]

不关心ui问题，打包出来还是能用的，改成ipa自签一下就能用

musicFree.zip

感谢，确实可以安装使用，不过bilibili搜出来播放经常出错，不太稳定，偶尔可以播放成功，也有错误日志

[yong-s]

不关心ui问题，打包出来还是能用的，改成ipa自签一下就能用 musicFree.zip

谢谢大佬，已经自签成功了🙏