diff --git a/publish/changeLog.md b/publish/changeLog.md index 1f0bfbd..97d519e 100644 --- a/publish/changeLog.md +++ b/publish/changeLog.md @@ -2,3 +2,7 @@ - 新增我的列表中已收藏的在线列表的更新功能。注意:这将会覆盖本地的目标列表,歌曲将被替换成最新的在线列表(与PC端的同步一样) - 歌曲添加、移动弹窗新增创建新列表功能 + +### 优化 + +- 优化应用布局对手机系统字体大小的适配 diff --git a/src/components/common/Input.js b/src/components/common/Input.js index 8d694fa..39a9e53 100644 --- a/src/components/common/Input.js +++ b/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, }, diff --git a/src/screens/Home/List/components/MyList.js b/src/screens/Home/List/components/MyList.js index f011273..157e3b8 100644 --- a/src/screens/Home/List/components/MyList.js +++ b/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', }, diff --git a/src/screens/Home/List/index.js b/src/screens/Home/List/index.js index 0d25c5c..9f3ea22 100644 --- a/src/screens/Home/List/index.js +++ b/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 diff --git a/src/screens/Home/Search/components/SourceSelector.js b/src/screens/Home/Search/components/SourceSelector.js index a6992f3..f31f6a9 100644 --- a/src/screens/Home/Search/components/SourceSelector.js +++ b/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 ( setSearchSource({ searchSource: action })} > - {t(`source_${sourceNameType}_${searchSource}`)} + + {t(`source_${sourceNameType}_${searchSource}`)} + ) }) @@ -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, }, }) diff --git a/src/screens/Home/SongList/List/SortTab.js b/src/screens/Home/SongList/List/SortTab.js index 34809d9..e8e21d8 100644 --- a/src/screens/Home/SongList/List/SortTab.js +++ b/src/screens/Home/SongList/List/SortTab.js @@ -32,7 +32,7 @@ export default memo(() => { return ( - + { sorts.map(s => ( 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, }, }) diff --git a/src/screens/Home/SongList/List/SourceSelector.js b/src/screens/Home/SongList/List/SourceSelector.js index 70f15ae..6fe59d9 100644 --- a/src/screens/Home/SongList/List/SourceSelector.js +++ b/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 ( - {t(`source_${sourceNameType}_${songListSource}`)} + + {t(`source_${sourceNameType}_${songListSource}`)} + ) }) @@ -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, }, }) diff --git a/src/screens/Home/SongList/List/Tag.js b/src/screens/Home/SongList/List/Tag.js index 51172aa..36c8d5e 100644 --- a/src/screens/Home/SongList/List/Tag.js +++ b/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: { diff --git a/src/screens/Home/Top/LeftBar.js b/src/screens/Home/Top/LeftBar.js index 3dbde3d..93fa56c 100644 --- a/src/screens/Home/Top/LeftBar.js +++ b/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, diff --git a/src/screens/Home/Top/SourceSelector.js b/src/screens/Home/Top/SourceSelector.js index f9d8673..ac0a7c7 100644 --- a/src/screens/Home/Top/SourceSelector.js +++ b/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 })} > - {t(`source_${sourceNameType}_${sourceId}`)} + + {t(`source_${sourceNameType}_${sourceId}`)} + ) }) @@ -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, }, }) diff --git a/src/screens/Home/components/PlayerPortrait/components/PlayInfo.js b/src/screens/Home/components/PlayerPortrait/components/PlayInfo.js index 43af0be..0de2a3d 100644 --- a/src/screens/Home/components/PlayerPortrait/components/PlayInfo.js +++ b/src/screens/Home/components/PlayerPortrait/components/PlayInfo.js @@ -23,7 +23,7 @@ export default () => { return ( <> - + {/* */} diff --git a/src/screens/Home/components/PlayerPortrait/index.js b/src/screens/Home/components/PlayerPortrait/index.js index e561a2b..684a0f5 100644 --- a/src/screens/Home/components/PlayerPortrait/index.js +++ b/src/screens/Home/components/PlayerPortrait/index.js @@ -24,7 +24,7 @@ export default memo(({ playNextModes }) => { - + {/* <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',