mirror of
https://github.com/ikun0014/lx-music-mobile.git
synced 2025-05-23 22:37:41 +08:00
471 lines
12 KiB
JavaScript
471 lines
12 KiB
JavaScript
import { Navigation } from 'react-native-navigation'
|
|
import { Dimensions, InteractionManager } from 'react-native'
|
|
|
|
import {
|
|
HOME_SCREEN,
|
|
PLAY_DETAIL_SCREEN,
|
|
SONGLIST_DETAIL_SCREEN,
|
|
// SETTING_SCREEN,
|
|
} from './screenNames'
|
|
|
|
|
|
export function pushHomeScreen() {
|
|
/*
|
|
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.setRoot({
|
|
root: {
|
|
stack: {
|
|
children: [{
|
|
component: {
|
|
name: HOME_SCREEN,
|
|
options: {
|
|
topBar: {
|
|
visible: false,
|
|
height: 0,
|
|
drawBehind: false,
|
|
},
|
|
statusBar: {
|
|
drawBehind: true,
|
|
visible: true,
|
|
style: 'dark',
|
|
backgroundColor: 'transparent',
|
|
},
|
|
},
|
|
},
|
|
}],
|
|
},
|
|
},
|
|
})
|
|
}
|
|
export function pushPlayDetailScreen(componentId, id) {
|
|
/*
|
|
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',
|
|
},
|
|
})
|
|
*/
|
|
InteractionManager.runAfterInteractions(() => {
|
|
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: {
|
|
sharedElementTransitions: [
|
|
{
|
|
fromId: `pic${id}`,
|
|
toId: `pic${id}Dest`,
|
|
interpolation: { type: 'spring' },
|
|
},
|
|
],
|
|
elementTransitions: [
|
|
{
|
|
id: 'header',
|
|
alpha: {
|
|
from: 0, // We don't declare 'to' value as that is the element's current alpha value, here we're essentially animating from 0 to 1
|
|
duration: 300,
|
|
},
|
|
translationY: {
|
|
from: -16, // Animate translationY from 16dp to 0dp
|
|
duration: 300,
|
|
},
|
|
},
|
|
{
|
|
id: 'pageIndicator',
|
|
alpha: {
|
|
from: 0, // We don't declare 'to' value as that is the element's current alpha value, here we're essentially animating from 0 to 1
|
|
duration: 300,
|
|
},
|
|
translationX: {
|
|
from: -16, // Animate translationY from 16dp to 0dp
|
|
duration: 300,
|
|
},
|
|
},
|
|
{
|
|
id: 'player',
|
|
alpha: {
|
|
from: 0, // We don't declare 'to' value as that is the element's current alpha value, here we're essentially animating from 0 to 1
|
|
duration: 300,
|
|
},
|
|
translationY: {
|
|
from: 16, // Animate translationY from 16dp to 0dp
|
|
duration: 300,
|
|
},
|
|
},
|
|
],
|
|
// 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 pushSonglistDetailScreen(componentId, id) {
|
|
InteractionManager.runAfterInteractions(() => {
|
|
Navigation.push(componentId, {
|
|
component: {
|
|
name: SONGLIST_DETAIL_SCREEN,
|
|
options: {
|
|
topBar: {
|
|
visible: false,
|
|
height: 0,
|
|
drawBehind: false,
|
|
},
|
|
statusBar: {
|
|
drawBehind: true,
|
|
visible: true,
|
|
style: 'dark',
|
|
backgroundColor: 'transparent',
|
|
},
|
|
animations: {
|
|
push: {
|
|
sharedElementTransitions: [
|
|
{
|
|
fromId: `pic${id}`,
|
|
toId: `pic${id}Dest`,
|
|
interpolation: { type: 'spring' },
|
|
},
|
|
],
|
|
elementTransitions: [
|
|
{
|
|
id: 'title',
|
|
alpha: {
|
|
from: 0, // We don't declare 'to' value as that is the element's current alpha value, here we're essentially animating from 0 to 1
|
|
duration: 300,
|
|
},
|
|
translationX: {
|
|
from: 16, // Animate translationX from 16dp to 0dp
|
|
duration: 300,
|
|
},
|
|
},
|
|
],
|
|
// content: {
|
|
// scaleX: {
|
|
// from: 1.2,
|
|
// to: 1,
|
|
// duration: 200,
|
|
// },
|
|
// scaleY: {
|
|
// from: 1.2,
|
|
// to: 1,
|
|
// duration: 200,
|
|
// },
|
|
// alpha: {
|
|
// from: 0,
|
|
// to: 1,
|
|
// duration: 200,
|
|
// },
|
|
// },
|
|
},
|
|
pop: {
|
|
sharedElementTransitions: [
|
|
{
|
|
fromId: `pic${id}Dest`,
|
|
toId: `pic${id}`,
|
|
interpolation: { type: 'spring' },
|
|
},
|
|
],
|
|
elementTransitions: [
|
|
{
|
|
id: 'title',
|
|
alpha: {
|
|
to: 0, // We don't declare 'to' value as that is the element's current alpha value, here we're essentially animating from 0 to 1
|
|
duration: 300,
|
|
},
|
|
translationX: {
|
|
to: 16, // Animate translationX from 16dp to 0dp
|
|
duration: 300,
|
|
},
|
|
},
|
|
],
|
|
// content: {
|
|
// alpha: {
|
|
// from: 1,
|
|
// to: 0,
|
|
// duration: 200,
|
|
// },
|
|
// },
|
|
},
|
|
},
|
|
},
|
|
},
|
|
})
|
|
})
|
|
}
|
|
// export function pushSettingScreen(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: SETTING_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 pushSingleScreenApp() {
|
|
Navigation.setRoot({
|
|
root: {
|
|
stack: {
|
|
children: [{
|
|
component: {
|
|
name: SINGLE_APP_SCREEN,
|
|
options: {
|
|
topBar: {
|
|
title: {
|
|
text: 'SINGLE SCREEN APP',
|
|
},
|
|
leftButtons: [
|
|
{
|
|
id: 'nav_user_btn',
|
|
icon: require('assets/icons/ic_nav_user.png'),
|
|
color: 'white',
|
|
},
|
|
],
|
|
rightButtons: [
|
|
{
|
|
id: 'nav_logout_btn',
|
|
icon: require('assets/icons/ic_nav_logout.png'),
|
|
color: 'white',
|
|
},
|
|
],
|
|
},
|
|
},
|
|
},
|
|
}],
|
|
},
|
|
},
|
|
})
|
|
}
|
|
|
|
export function pushTabBasedApp() {
|
|
Navigation.setRoot({
|
|
root: {
|
|
bottomTabs: {
|
|
children: [{
|
|
stack: {
|
|
children: [{
|
|
component: {
|
|
name: TAB1_SCREEN,
|
|
options: {
|
|
topBar: {
|
|
title: {
|
|
text: 'TAB 1',
|
|
},
|
|
leftButtons: [
|
|
{
|
|
id: 'nav_user_btn',
|
|
icon: require('assets/icons/ic_nav_user.png'),
|
|
color: 'white',
|
|
},
|
|
],
|
|
rightButtons: [
|
|
{
|
|
id: 'nav_logout_btn',
|
|
icon: require('assets/icons/ic_nav_logout.png'),
|
|
color: 'white',
|
|
},
|
|
],
|
|
},
|
|
},
|
|
},
|
|
}],
|
|
options: {
|
|
bottomTab: {
|
|
icon: require('assets/icons/ic_tab_home.png'),
|
|
testID: 'FIRST_TAB_BAR_BUTTON',
|
|
text: 'Tab1',
|
|
},
|
|
},
|
|
},
|
|
},
|
|
{
|
|
stack: {
|
|
children: [{
|
|
component: {
|
|
name: TAB2_SCREEN,
|
|
options: {
|
|
topBar: {
|
|
title: {
|
|
text: 'TAB 2',
|
|
},
|
|
leftButtons: [
|
|
{
|
|
id: 'nav_user_btn',
|
|
icon: require('assets/icons/ic_nav_user.png'),
|
|
color: 'white',
|
|
},
|
|
],
|
|
rightButtons: [
|
|
{
|
|
id: 'nav_logout_btn',
|
|
icon: require('assets/icons/ic_nav_logout.png'),
|
|
color: 'white',
|
|
},
|
|
],
|
|
},
|
|
},
|
|
},
|
|
}],
|
|
options: {
|
|
bottomTab: {
|
|
icon: require('assets/icons/ic_tab_menu.png'),
|
|
testID: 'SECOND_TAB_BAR_BUTTON',
|
|
text: 'Tab2',
|
|
},
|
|
},
|
|
},
|
|
}],
|
|
},
|
|
},
|
|
})
|
|
}
|
|
*/
|