整理代码

src/screens/PlayDetail/Portrait/Player/Player/index.js

@@ -1,69 +0,0 @@
-import React, { useCallback, memo, useMemo, useEffect } from 'react'
-import { View, Text, StyleSheet } from 'react-native'
-import { useLayout, useKeyboard } from '@/utils/hooks'
-import { useGetter, useDispatch } from '@/store'
-import { BorderWidths } from '@/theme'
-
-import Title from './components/Title'
-import MoreBtn from './components/MoreBtn'
-import PlayInfo from './components/PlayInfo'
-import ControlBtn from './components/ControlBtn'
-
-
-export default memo(({ playNextModes }) => {
-  // const { onLayout, ...layout } = useLayout()
-  const theme = useGetter('common', 'theme')
-
-  return (
-    <View style={{ ...styles.container, backgroundColor: theme.primary }}>
-      <View style={{ ...styles.info }} >
-        <Title />
-        <MoreBtn />
-      </View>
-      <View style={styles.status}>
-        <PlayInfo />
-      </View>
-      <View style={styles.control}>
-        <ControlBtn playNextModes={playNextModes} />
-      </View>
-    </View>
-  )
-})
-
-const styles = StyleSheet.create({
-  container: {
-    width: '100%',
-    // paddingTop: progressContentPadding,
-    // marginTop: -progressContentPadding,
-    // backgroundColor: 'rgba(0, 0, 0, .1)',
-    padding: 15,
-    // backgroundColor: AppColors.primary,
-    // backgroundColor: 'red',
-  },
-  info: {
-    flexDirection: 'row',
-    paddingBottom: 10,
-  },
-  status: {
-    flexDirection: 'column',
-    flexGrow: 1,
-    flexShrink: 1,
-    paddingLeft: 5,
-    justifyContent: 'space-evenly',
-  },
-  control: {
-    flexDirection: 'row',
-    justifyContent: 'space-evenly',
-    flexGrow: 0,
-    flexShrink: 0,
-    paddingLeft: '15%',
-    paddingRight: '15%',
-    paddingTop: '10%',
-    paddingBottom: '8%',
-  },
-  row: {
-    flexDirection: 'row',
-    flexGrow: 0,
-    flexShrink: 0,
-  },
-})

src/screens/PlayDetail/Portrait/Player/index.js

@@ -1,96 +1,69 @@
-import React, { useEffect, useCallback, memo, useState, useMemo, useRef } from 'react'
+import React, { useCallback, memo, useMemo, useEffect } from 'react'
-import { View, StyleSheet } from 'react-native'
+import { View, Text, StyleSheet } from 'react-native'
-
+import { useLayout, useKeyboard } from '@/utils/hooks'
-import Header from '../components/Header'
-// import Aside from './components/Aside'
-// import Main from './components/Main'
-import Player from './Player'
 import { useGetter, useDispatch } from '@/store'
-import PagerView from 'react-native-pager-view'
+import { BorderWidths } from '@/theme'
-import Pic from './Pic'
-import Lyric from './Lyric'
-import { screenkeepAwake, screenUnkeepAwake } from '@/utils/utils'
 
-const LyricPage = ({ activeIndex }) => {
+import Title from './components/Title'
-  const initedRef = useRef(false)
+import MoreBtn from './components/MoreBtn'
-  const lyric = useMemo(() => <Lyric />, [])
+import PlayInfo from './components/PlayInfo'
-  switch (activeIndex) {
+import ControlBtn from './components/ControlBtn'
-    // case 3:
-    case 1:
-      if (!initedRef.current) initedRef.current = true
-      return lyric
-    default:
-      return initedRef.current ? lyric : null
-  }
-  // return activeIndex == 0 || activeIndex == 1 ? setting : null
-}
 
-// global.iskeep = false
+
-export default memo(({ componentId }) => {
+export default memo(({ playNextModes }) => {
+  // const { onLayout, ...layout } = useLayout()
   const theme = useGetter('common', 'theme')
-  const [pageIndex, setPageIndex] = useState(0)
-
-  const onPageSelected = useCallback(({ nativeEvent }) => {
-    setPageIndex(nativeEvent.position)
-    if (nativeEvent.position == 1) {
-      screenkeepAwake()
-    } else {
-      screenUnkeepAwake()
-    }
-  }, [])
 
   return (
-    <>
+    <View style={{ ...styles.container, backgroundColor: theme.primary }}>
-      <Header />
+      <View style={{ ...styles.info }} >
-      <View style={{ flex: 1, flexDirection: 'column', height: '100%', backgroundColor: theme.primary }}>
+        <Title />
-        <PagerView
+        <MoreBtn />
-          onPageSelected={onPageSelected}
-          // onPageScrollStateChanged={onPageScrollStateChanged}
-          style={styles.pagerView}
-        >
-          <View collapsable={false} style={styles.pageStyle}>
-            <Pic componentId={componentId} />
       </View>
-          <View collapsable={false} style={styles.pageStyle}>
+      <View style={styles.status}>
-            <LyricPage activeIndex={pageIndex} />
+        <PlayInfo />
       </View>
-        </PagerView>
+      <View style={styles.control}>
-        <View style={styles.pageIndicator} nativeID="pageIndicator">
+        <ControlBtn playNextModes={playNextModes} />
-          <View style={{ ...styles.pageIndicatorItem, backgroundColor: pageIndex == 0 ? theme.secondary20 : theme.normal60 }}></View>
-          <View style={{ ...styles.pageIndicatorItem, backgroundColor: pageIndex == 1 ? theme.secondary20 : theme.normal60 }}></View>
-        </View>
-        <View style={styles.player} nativeID="player">
-          <Player />
       </View>
     </View>
-    </>
   )
 })
 
 const styles = StyleSheet.create({
   container: {
+    width: '100%',
+    // paddingTop: progressContentPadding,
+    // marginTop: -progressContentPadding,
+    // backgroundColor: 'rgba(0, 0, 0, .1)',
+    padding: 15,
+    // backgroundColor: AppColors.primary,
+    // backgroundColor: 'red',
+  },
+  info: {
+    flexDirection: 'row',
+    paddingBottom: 10,
+  },
+  status: {
+    flexDirection: 'column',
     flexGrow: 1,
     flexShrink: 1,
-    backgroundColor: '#fff',
+    paddingLeft: 5,
+    justifyContent: 'space-evenly',
   },
-  pagerView: {
+  control: {
-    flex: 1,
-  },
-  pageIndicator: {
-    flex: 0,
     flexDirection: 'row',
-    justifyContent: 'center',
+    justifyContent: 'space-evenly',
-    paddingTop: 10,
+    flexGrow: 0,
-    // backgroundColor: 'rgba(0,0,0,0.1)',
+    flexShrink: 0,
+    paddingLeft: '15%',
+    paddingRight: '15%',
+    paddingTop: '10%',
+    paddingBottom: '8%',
   },
-  pageIndicatorItem: {
+  row: {
-    height: 3,
+    flexDirection: 'row',
-    width: '5%',
+    flexGrow: 0,
-    marginLeft: 2,
+    flexShrink: 0,
-    marginRight: 2,
-    borderRadius: 2,
-  },
-  player: {
-    flex: 0,
   },
 })

src/screens/PlayDetail/Portrait/index.js

@@ -1,13 +1,96 @@
-import React, { useEffect, useCallback } from 'react'
+import React, { useEffect, useCallback, memo, useState, useMemo, useRef } from 'react'
 import { View, StyleSheet } from 'react-native'
-import { useGetter, useDispatch } from '@/store'
 
+import Header from './components/Header'
+// import Aside from './components/Aside'
+// import Main from './components/Main'
 import Player from './Player'
+import { useGetter, useDispatch } from '@/store'
+import PagerView from 'react-native-pager-view'
+import Pic from './Pic'
+import Lyric from './Lyric'
+import { screenkeepAwake, screenUnkeepAwake } from '@/utils/utils'
+
+const LyricPage = ({ activeIndex }) => {
+  const initedRef = useRef(false)
+  const lyric = useMemo(() => <Lyric />, [])
+  switch (activeIndex) {
+    // case 3:
+    case 1:
+      if (!initedRef.current) initedRef.current = true
+      return lyric
+    default:
+      return initedRef.current ? lyric : null
+  }
+  // return activeIndex == 0 || activeIndex == 1 ? setting : null
+}
+
+// global.iskeep = false
+export default memo(({ componentId }) => {
+  const theme = useGetter('common', 'theme')
+  const [pageIndex, setPageIndex] = useState(0)
+
+  const onPageSelected = useCallback(({ nativeEvent }) => {
+    setPageIndex(nativeEvent.position)
+    if (nativeEvent.position == 1) {
+      screenkeepAwake()
+    } else {
+      screenUnkeepAwake()
+    }
+  }, [])
 
-export default ({ componentId }) => {
   return (
     <>
-      <Player componentId={componentId} />
+      <Header />
+      <View style={{ flex: 1, flexDirection: 'column', height: '100%', backgroundColor: theme.primary }}>
+        <PagerView
+          onPageSelected={onPageSelected}
+          // onPageScrollStateChanged={onPageScrollStateChanged}
+          style={styles.pagerView}
+        >
+          <View collapsable={false} style={styles.pageStyle}>
+            <Pic componentId={componentId} />
+          </View>
+          <View collapsable={false} style={styles.pageStyle}>
+            <LyricPage activeIndex={pageIndex} />
+          </View>
+        </PagerView>
+        <View style={styles.pageIndicator} nativeID="pageIndicator">
+          <View style={{ ...styles.pageIndicatorItem, backgroundColor: pageIndex == 0 ? theme.secondary20 : theme.normal60 }}></View>
+          <View style={{ ...styles.pageIndicatorItem, backgroundColor: pageIndex == 1 ? theme.secondary20 : theme.normal60 }}></View>
+        </View>
+        <View style={styles.player} nativeID="player">
+          <Player />
+        </View>
+      </View>
     </>
   )
-}
+})
+
+const styles = StyleSheet.create({
+  container: {
+    flexGrow: 1,
+    flexShrink: 1,
+    backgroundColor: '#fff',
+  },
+  pagerView: {
+    flex: 1,
+  },
+  pageIndicator: {
+    flex: 0,
+    flexDirection: 'row',
+    justifyContent: 'center',
+    paddingTop: 10,
+    // backgroundColor: 'rgba(0,0,0,0.1)',
+  },
+  pageIndicatorItem: {
+    height: 3,
+    width: '5%',
+    marginLeft: 2,
+    marginRight: 2,
+    borderRadius: 2,
+  },
+  player: {
+    flex: 0,
+  },
+})