优化应用布局对手机系统字体大小的适配

publish/changeLog.md

@@ -2,3 +2,7 @@
 
 - 新增我的列表中已收藏的在线列表的更新功能。注意：这将会覆盖本地的目标列表，歌曲将被替换成最新的在线列表（与PC端的同步一样）
 - 歌曲添加、移动弹窗新增创建新列表功能
+
+### 优化
+
+- 优化应用布局对手机系统字体大小的适配

src/components/common/Input.js

@@ -80,7 +80,7 @@ const styles = StyleSheet.create({
     // backgroundColor: 'rgba(0,0,0,0.1)',
     flexGrow: 1,
     flexShrink: 1,
-    height: 38,
+    // height: 38,
     alignItems: 'center',
     // paddingRight: 5,
   },

src/screens/Home/List/components/MyList.js

@@ -231,11 +231,11 @@ export default memo(({ currentList, activeListIdRef, handleCancelMultiSelect })
 
 const styles = StyleSheet.create({
   sourceMenu: {
-    height: 38,
-    lineHeight: 38,
     minWidth: 70,
     paddingLeft: 10,
     paddingRight: 10,
+    paddingTop: 10,
+    paddingBottom: 10,
   },
 
   container: {
@@ -250,7 +250,9 @@ const styles = StyleSheet.create({
     borderBottomWidth: BorderWidths.normal,
   },
   listName: {
-    height: 46,
+    // height: 46,
+    paddingTop: 12,
+    paddingBottom: 12,
     justifyContent: 'center',
     flexGrow: 1,
     flexShrink: 1,
@@ -258,7 +260,9 @@ const styles = StyleSheet.create({
   },
   listMoreBtn: {
     width: 50,
-    height: 46,
+    // height: 46,
+    paddingTop: 12,
+    paddingBottom: 12,
     justifyContent: 'center',
     alignItems: 'center',
   },

src/screens/Home/List/index.js

@@ -343,12 +343,6 @@ const styles = StyleSheet.create({
     flexGrow: 1,
     flexShrink: 1,
   },
-  lists: {
-    height: 50,
-    flexGrow: 0,
-    flexShrink: 0,
-    flexDirection: 'row',
-  },
 })
 
 export default List

src/screens/Home/Search/components/SourceSelector.js

@@ -1,9 +1,10 @@
 import React, { memo, useMemo } from 'react'
-import { StyleSheet, Text } from 'react-native'
+import { StyleSheet, Text, View } from 'react-native'
 
 import DorpDownMenu from '@/components/common/DorpDownMenu'
 import { useGetter, useDispatch } from '@/store'
 import { useTranslation } from '@/plugins/i18n'
+import { useLayout } from '@/utils/hooks'
 
 
 export default memo(() => {
@@ -14,6 +15,7 @@ export default memo(() => {
   const theme = useGetter('common', 'theme')
   // const currentSourceName = useGetter('search', 'currentSourceName')
   const { t } = useTranslation()
+  const { onLayout, ...layout } = useLayout()
 
   const sourceList_t = useMemo(() => {
     return sourceList.map(s => ({ label: t(`source_${sourceNameType}_${s.id}`), action: s.id }))
@@ -22,10 +24,12 @@ export default memo(() => {
   return (
     <DorpDownMenu
       menus={sourceList_t}
-      width={80}
+      width={layout.width}
       onPress={({ action }) => setSearchSource({ searchSource: action })}
     >
-      <Text style={{ ...styles.sourceMenu, color: theme.normal }}>{t(`source_${sourceNameType}_${searchSource}`)}</Text>
+      <View style={styles.sourceMenu} onLayout={onLayout}>
+        <Text style={{ color: theme.normal }}>{t(`source_${sourceNameType}_${searchSource}`)}</Text>
+      </View>
     </DorpDownMenu>
   )
 })
@@ -33,9 +37,11 @@ export default memo(() => {
 
 const styles = StyleSheet.create({
   sourceMenu: {
-    height: 38,
-    lineHeight: 38,
-    textAlign: 'center',
-    width: 80,
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingLeft: 12,
+    paddingRight: 12,
+    // width: 80,
   },
 })

src/screens/Home/SongList/List/SortTab.js

@@ -32,7 +32,7 @@ export default memo(() => {
 
 
   return (
-    <ScrollView style={styles.container} keyboardShouldPersistTaps={'always'} horizontal={true} showsHorizontalScrollIndicator={false}>
+    <ScrollView style={styles.container} keyboardShouldPersistTaps={'always'} horizontal={true}>
       {
         sorts.map(s => (
           <TouchableOpacity style={styles.button} onPress={() => setSongList({ sortId: s.id })} key={s.id}>
@@ -67,11 +67,13 @@ const styles = StyleSheet.create({
     // backgroundColor: 'rgba(0,0,0,0.1)',
   },
   buttonText: {
-    height: 38,
-    lineHeight: 38,
+    // height: 38,
+    // lineHeight: 38,
     textAlign: 'center',
     paddingLeft: 15,
     paddingRight: 15,
+    paddingTop: 10,
+    paddingBottom: 10,
     // width: 80,
   },
 })

src/screens/Home/SongList/List/SourceSelector.js

@@ -1,9 +1,10 @@
 import React, { memo, useMemo, useCallback } from 'react'
-import { StyleSheet, Text } from 'react-native'
+import { StyleSheet, Text, View } from 'react-native'
 
 import DorpDownMenu from '@/components/common/DorpDownMenu'
 import { useGetter, useDispatch } from '@/store'
 import { useTranslation } from '@/plugins/i18n'
+import { useLayout } from '@/utils/hooks'
 
 
 export default memo(() => {
@@ -15,6 +16,7 @@ export default memo(() => {
   const sortList = useGetter('songList', 'sortList')
   const sourceNameType = useGetter('common', 'sourceNameType')
   const theme = useGetter('common', 'theme')
+  const { onLayout, ...layout } = useLayout()
 
   const sources_t = useMemo(() => {
     return sources.map(s => ({ label: t(`source_${sourceNameType}_${s.id}`), action: s.id }))
@@ -28,10 +30,12 @@ export default memo(() => {
   return (
     <DorpDownMenu
       menus={sources_t}
-      width={80}
+      width={layout.width}
       onPress={handleSetSource}
     >
-      <Text style={{ ...styles.sourceMenu, color: theme.normal }}>{t(`source_${sourceNameType}_${songListSource}`)}</Text>
+      <View style={styles.sourceMenu} onLayout={onLayout}>
+        <Text style={{ color: theme.normal }}>{t(`source_${sourceNameType}_${songListSource}`)}</Text>
+      </View>
     </DorpDownMenu>
   )
 })
@@ -39,9 +43,10 @@ export default memo(() => {
 
 const styles = StyleSheet.create({
   sourceMenu: {
-    height: 38,
-    lineHeight: 38,
-    textAlign: 'center',
-    width: 80,
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingLeft: 12,
+    paddingRight: 12,
   },
 })

src/screens/Home/SongList/List/Tag.js

@@ -88,12 +88,14 @@ export default memo(() => {
 
 const styles = StyleSheet.create({
   sourceMenu: {
-    height: 38,
-    lineHeight: 38,
+    // height: 38,
+    // lineHeight: 38,
     textAlign: 'center',
     // minWidth: 70,
     paddingLeft: 12,
     paddingRight: 12,
+    paddingTop: 10,
+    paddingBottom: 10,
   },
 
   container: {

src/screens/Home/Top/LeftBar.js

@@ -24,6 +24,7 @@ const styles = StyleSheet.create({
   container: {
     flexDirection: 'column',
     width: '26%',
+    maxWidth: 120,
     flexGrow: 0,
     flexShrink: 0,
     borderRightWidth: BorderWidths.normal,

src/screens/Home/Top/SourceSelector.js

@@ -1,5 +1,5 @@
 import React, { memo, useMemo } from 'react'
-import { StyleSheet, Text } from 'react-native'
+import { StyleSheet, Text, View } from 'react-native'
 
 import DorpDownMenu from '@/components/common/DorpDownMenu'
 import { useGetter, useDispatch } from '@/store'
@@ -25,7 +25,9 @@ export default memo(({ layout }) => {
       width={layout.width}
       onPress={({ action }) => setTop({ source: action })}
     >
-      <Text style={{ ...styles.sourceMenu, color: theme.normal }}>{t(`source_${sourceNameType}_${sourceId}`)}</Text>
+      <View style={styles.sourceMenu}>
+        <Text style={{ color: theme.normal }} numberOfLines={1}>{t(`source_${sourceNameType}_${sourceId}`)}</Text>
+      </View>
     </DorpDownMenu>
   )
 })
@@ -33,11 +35,10 @@ export default memo(({ layout }) => {
 
 const styles = StyleSheet.create({
   sourceMenu: {
-    height: 38,
-    lineHeight: 38,
+    justifyContent: 'center',
+    paddingTop: 12,
+    paddingBottom: 12,
     paddingLeft: 10,
     paddingRight: 10,
-    // textAlign: 'center',
-    // width: 80,
   },
 })

src/screens/Home/components/PlayerPortrait/components/PlayInfo.js

@@ -23,7 +23,7 @@ export default () => {
   return (
     <>
       <View style={styles.progress}><Progress progress={progress} bufferedProgress={bufferedProgress} duration={duration} /></View>
-      <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'flex-end', height: 17 }}>
+      <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'flex-end' }}>
         {/* <MusicName /> */}
         <View style={{ flexGrow: 1, flexShrink: 1, paddingRight: 5 }} >
           <Status />

src/screens/Home/components/PlayerPortrait/index.js

@@ -24,7 +24,7 @@ export default memo(({ playNextModes }) => {
     <View style={{ ...styles.container, backgroundColor: theme.primary, borderTopColor: theme.secondary10 }}>
       <View style={styles.left} elevation={1}><Pic /></View>
       <View style={styles.center}>
-        <View style={{ ...styles.row, justifyContent: 'space-between', fontSize: 12, height: 19 }}>
+        <View style={{ ...styles.row, justifyContent: 'space-between', fontSize: 12 }}>
           <Title />
           {/* <PlayTime /> */}
         </View>
@@ -44,7 +44,7 @@ export default memo(({ playNextModes }) => {
 const styles = StyleSheet.create({
   container: {
     width: '100%',
-    height: 59,
+    // height: 59,
     // paddingTop: progressContentPadding,
     // marginTop: -progressContentPadding,
     // backgroundColor: 'rgba(0, 0, 0, .1)',
@@ -68,7 +68,7 @@ const styles = StyleSheet.create({
     flexShrink: 1,
     paddingLeft: 5,
     justifyContent: 'space-evenly',
-    height: 48,
+    // height: 48,
   },
   right: {
     flexDirection: 'row',