初步完善

src/navigation/navigation.js

@@ -1,8 +1,9 @@
 import { Navigation } from 'react-native-navigation'
-// import { Dimensions } from 'react-native'
+import { Dimensions } from 'react-native'
 
 import {
   HOME_SCREEN,
+  PLAY_DETAIL_SCREEN,
   // SETTING_SCREEN,
 } from './screenNames'
 
@@ -66,6 +67,79 @@ export function pushHomeScreen() {
     },
   })
 }
+export function pushPlayDetailScreen(componentId) {
+  /*
+    Navigation.setDefaultOptions({
+      topBar: {
+        background: {
+          color: '#039893',
+        },
+        title: {
+          color: 'white',
+        },
+        backButton: {
+          title: '', // Remove previous screen name from back button
+          color: 'white',
+        },
+        buttonColor: 'white',
+      },
+      statusBar: {
+        style: 'light',
+      },
+      layout: {
+        orientation: ['portrait'],
+      },
+      bottomTabs: {
+        titleDisplayMode: 'alwaysShow',
+      },
+      bottomTab: {
+        textColor: 'gray',
+        selectedTextColor: 'black',
+        iconColor: 'gray',
+        selectedIconColor: 'black',
+      },
+    })
+  */
+
+  Navigation.push(componentId, {
+    component: {
+      name: PLAY_DETAIL_SCREEN,
+      options: {
+        topBar: {
+          visible: false,
+          height: 0,
+          drawBehind: false,
+        },
+        statusBar: {
+          drawBehind: true,
+          visible: true,
+          style: 'dark',
+          backgroundColor: 'transparent',
+        },
+        animations: {
+          push: {
+            content: {
+              translationX: {
+                from: Dimensions.get('window').width,
+                to: 0,
+                duration: 300,
+              },
+            },
+          },
+          pop: {
+            content: {
+              translationX: {
+                from: 0,
+                to: Dimensions.get('window').width,
+                duration: 300,
+              },
+            },
+          },
+        },
+      },
+    },
+  })
+}
 // export function pushSettingScreen(componentId) {
 //   /*
 //     Navigation.setDefaultOptions({

src/navigation/registerScreens.js

@@ -5,12 +5,14 @@ import { Navigation } from 'react-native-navigation'
 
 import {
   Home,
+  PlayDetail,
   // Setting,
 } from '@/screens'
 import { Provider } from '@/store'
 
 import {
   HOME_SCREEN,
+  PLAY_DETAIL_SCREEN,
   VERSION_MODAL,
   PACT_MODAL,
   // SETTING_SCREEN,
@@ -34,6 +36,7 @@ function WrappedComponent(Component) {
 
 export default () => {
   Navigation.registerComponent(HOME_SCREEN, () => WrappedComponent(Home))
+  Navigation.registerComponent(PLAY_DETAIL_SCREEN, () => WrappedComponent(PlayDetail))
   Navigation.registerComponent(VERSION_MODAL, () => WrappedComponent(VersionModal))
   Navigation.registerComponent(PACT_MODAL, () => WrappedComponent(PactModal))
 

src/navigation/screenNames.js

@@ -1,4 +1,5 @@
 export const HOME_SCREEN = 'lxm.HomeScreen'
+export const PLAY_DETAIL_SCREEN = 'lxm.PlayDetailScreen'
 export const VERSION_MODAL = 'lxm.VersionModal'
 export const PACT_MODAL = 'lxm.PactModal'
 // export const TOAST_SCREEN = 'lxm.ToastScreen'

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

@@ -1,10 +1,10 @@
 import React, { useCallback, memo, useMemo, useEffect, useState } from 'react'
-import { View, Text, StyleSheet, Image, TouchableOpacity } from 'react-native'
+import { View, Text, StyleSheet, Image, TouchableOpacity, InteractionManager } from 'react-native'
 import { useGetter, useDispatch } from '@/store'
 import { toast } from '@/utils/tools'
 import { useTranslation } from '@/plugins/i18n'
 import { LIST_ID_PLAY_TEMP, LIST_ID_PLAY_LATER, NAV_VIEW_NAMES } from '@/config/constant'
-
+import { navigations } from '@/navigation'
 
 export default () => {
   const playMusicInfo = useGetter('player', 'playMusicInfo')
@@ -13,11 +13,18 @@ export default () => {
   const setNavActiveIndex = useDispatch('common', 'setNavActiveIndex')
   const setPrevSelectListId = useDispatch('common', 'setPrevSelectListId')
   const setJumpPosition = useDispatch('list', 'setJumpPosition')
-  const { t } = useTranslation()
+  // const { t } = useTranslation()
+  const componentIds = useGetter('common', 'componentIds')
   const handlePress = useCallback(() => {
     // console.log('')
-    toast(t('play_detail_todo_tip'), 'long')
+    // console.log(playMusicInfo)
-  }, [t])
+    if (!playMusicInfo) return
+    InteractionManager.runAfterInteractions(() => {
+      navigations.pushPlayDetailScreen(componentIds.home)
+    })
+    // toast(t('play_detail_todo_tip'), 'long')
+  }, [componentIds.home, playMusicInfo])
+
   const handleLongPress = useCallback(() => {
     if (!playMusicInfo || playMusicInfo.listId == LIST_ID_PLAY_TEMP || playMusicInfo.listId == LIST_ID_PLAY_LATER) return
     setNavActiveIndex(NAV_VIEW_NAMES.list)

src/screens/PlayDetail/Pic.js

@@ -0,0 +1,50 @@
+import React, { memo, useMemo, useState, useEffect } from 'react'
+import { View, Image, StyleSheet } from 'react-native'
+import { useGetter, useDispatch } from '@/store'
+import { useLayout } from '@/utils/hooks'
+
+export default memo(() => {
+  const playMusicInfo = useGetter('player', 'playMusicInfo')
+  const [imgUrl, setImgUrl] = useState(null)
+  const theme = useGetter('common', 'theme')
+  const { onLayout, ...layout } = useLayout()
+
+  useEffect(() => {
+    const url = playMusicInfo ? playMusicInfo.musicInfo.img : null
+    if (imgUrl == url) return
+    setImgUrl(url)
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [playMusicInfo])
+
+  const imgWidth = useMemo(() => layout.width * 0.75, [layout.width])
+
+  return (
+    <View style={styles.container} onLayout={onLayout}>
+      <View style={{ ...styles.content }}>
+        <Image source={{ uri: imgUrl }} progressiveRenderingEnabled={true} borderRadius={2} style={{
+          ...styles.img,
+          backgroundColor: theme.primary,
+          width: imgWidth,
+          height: imgWidth,
+        }} />
+      </View>
+    </View>
+  )
+})
+
+const styles = StyleSheet.create({
+  container: {
+    flexGrow: 1,
+    flexShrink: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  content: {
+    elevation: 3,
+    backgroundColor: 'rgba(0,0,0,0)',
+    borderRadius: 4,
+  },
+  img: {
+    borderRadius: 4,
+  },
+})

src/screens/PlayDetail/Player/index.js

@@ -0,0 +1,54 @@
+import React, { useEffect, useCallback } from 'react'
+import { View, StyleSheet } from 'react-native'
+
+import Header from './components/Header'
+// import Aside from './components/Aside'
+// import Main from './components/Main'
+// import FooterPlayer from './components/FooterPlayer'
+import { useGetter, useDispatch } from '@/store'
+import PagerView from 'react-native-pager-view'
+import Pic from './Pic'
+
+export default () => {
+  const theme = useGetter('common', 'theme')
+
+  const onPageScrollStateChanged = useCallback(({ nativeEvent }) => {
+    // console.log(nativeEvent)
+    if (nativeEvent.pageScrollState != 'idle') return
+    console.log(nativeEvent.pageScrollState)
+  }, [])
+
+  return (
+    <>
+      <Header />
+      <View style={{ flex: 1, flexDirection: 'column', height: '100%', backgroundColor: theme.primary }}>
+        <PagerView
+          // onPageSelected={onPageSelected}
+          onPageScrollStateChanged={onPageScrollStateChanged}
+          style={styles.pagerView}
+        >
+          <View collapsable={false} key="1" style={styles.pageStyle}>
+            <Pic />
+          </View>
+        </PagerView>
+        <View style={styles.player}>
+
+        </View>
+      </View>
+    </>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexGrow: 1,
+    flexShrink: 1,
+    backgroundColor: '#fff',
+  },
+  pagerView: {
+    flex: 1,
+  },
+  player: {
+    flex: 0,
+  },
+})

src/screens/PlayDetail/components/Header.js

@@ -0,0 +1,59 @@
+import React, { memo } from 'react'
+
+import { View, StyleSheet, StatusBar, TouchableOpacity, Text } from 'react-native'
+
+import Icon from '@/components/common/Icon'
+import { useGetter, useDispatch } from '@/store'
+import { pop } from '@/navigation'
+
+// import { AppColors } from '@/theme'
+
+
+export default memo(() => {
+  const theme = useGetter('common', 'theme')
+  const componentIds = useGetter('common', 'componentIds')
+  const back = () => {
+    pop(componentIds.playDetail)
+  }
+
+  return (
+    <View style={{ ...styles.header, backgroundColor: theme.primary }}>
+      <StatusBar backgroundColor="rgba(0,0,0,0)" barStyle="dark-content" translucent={true} />
+      <View style={{ ...styles.container }}>
+        <TouchableOpacity onPress={back} style={{ ...styles.button }}>
+          <Icon name="chevron-left" style={{ color: theme.normal }} size={24} />
+        </TouchableOpacity>
+        <Text style={{ ...styles.title, color: theme.normal }}>播放详情</Text>
+      </View>
+    </View>
+  )
+})
+
+
+const styles = StyleSheet.create({
+  header: {
+    height: 40 + StatusBar.currentHeight,
+    paddingTop: StatusBar.currentHeight,
+  },
+  container: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    height: 40,
+    paddingRight: 40,
+  },
+  button: {
+    width: 40,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  title: {
+    flex: 1,
+    lineHeight: 40,
+    textAlign: 'center',
+    fontSize: 16,
+  },
+  icon: {
+    paddingLeft: 4,
+    paddingRight: 4,
+  },
+})

src/screens/PlayDetail/index.js

@@ -0,0 +1,59 @@
+import React, { useEffect, useCallback } from 'react'
+import { View, StyleSheet } from 'react-native'
+
+import Header from './components/Header'
+// import Aside from './components/Aside'
+// import Main from './components/Main'
+// import FooterPlayer from './components/FooterPlayer'
+import { useGetter, useDispatch } from '@/store'
+import PagerView from 'react-native-pager-view'
+import Pic from './Pic'
+
+export default (props) => {
+  const theme = useGetter('common', 'theme')
+  const setComponentId = useDispatch('common', 'setComponentId')
+  useEffect(() => {
+    setComponentId({ name: 'playDetail', id: props.componentId })
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  const onPageScrollStateChanged = useCallback(({ nativeEvent }) => {
+    // console.log(nativeEvent)
+    if (nativeEvent.pageScrollState != 'idle') return
+    console.log(nativeEvent.pageScrollState)
+  }, [])
+
+  return (
+    <>
+      <Header componentId={props.componentId} />
+      <View style={{ flex: 1, flexDirection: 'column', height: '100%', backgroundColor: theme.primary }}>
+        <PagerView
+          // onPageSelected={onPageSelected}
+          onPageScrollStateChanged={onPageScrollStateChanged}
+          style={styles.pagerView}
+        >
+          <View collapsable={false} key="1" style={styles.pageStyle}>
+            <Pic />
+          </View>
+        </PagerView>
+        <View style={styles.player}>
+
+        </View>
+      </View>
+    </>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexGrow: 1,
+    flexShrink: 1,
+    backgroundColor: '#fff',
+  },
+  pagerView: {
+    flex: 1,
+  },
+  player: {
+    flex: 0,
+  },
+})

src/screens/index.js

@@ -1,4 +1,5 @@
 export { default as Home } from './Home'
+export { default as PlayDetail } from './PlayDetail'
 // export { default as Setting } from './Setting'
 // export { default as LoginScreen } from './LoginScreen/LoginScreen'
 // export { default as SingleAppScreen } from './SingleAppScreen/SingleAppScreen'