index.tsx (5589cdf32b2bb0f641e5ac7bf1f6152cd6b9b70e) | index.tsx (ab5f994a52bee1ac7c89f2ccf9b6ca60d362890a) |
---|---|
1import React from 'react'; 2import {StyleSheet} from 'react-native'; 3import rpx from '@/utils/rpx'; 4import ActionButton from '../ActionButton'; 5import {ROUTE_PATH, useNavigate} from '@/entry/router'; 6import {ScrollView} from 'react-native-gesture-handler'; 7import {IIconName} from '@/components/base/icon.tsx'; 8 9interface IOperationsProps { | 1import React from 'react'; 2import {StyleSheet} from 'react-native'; 3import rpx from '@/utils/rpx'; 4import ActionButton from '../ActionButton'; 5import {ROUTE_PATH, useNavigate} from '@/entry/router'; 6import {ScrollView} from 'react-native-gesture-handler'; 7import {IIconName} from '@/components/base/icon.tsx'; 8 9interface IOperationsProps { |
10 orientation?: 'horizonal' | 'vertical'; | 10 orientation?: 'horizontal' | 'vertical'; |
11} 12 13interface IActionOption { 14 iconName: IIconName; 15 iconColor?: string; 16 title: string; 17 action?: () => void; 18} --- 43 unchanged lines hidden (view full) --- 62 }, 63 ]; 64 65 return ( 66 <ScrollView 67 style={ 68 orientation === 'vertical' 69 ? style.wrapper | 11} 12 13interface IActionOption { 14 iconName: IIconName; 15 iconColor?: string; 16 title: string; 17 action?: () => void; 18} --- 43 unchanged lines hidden (view full) --- 62 }, 63 ]; 64 65 return ( 66 <ScrollView 67 style={ 68 orientation === 'vertical' 69 ? style.wrapper |
70 : style.horizonalWrapper | 70 : style.horizontalWrapper |
71 } | 71 } |
72 scrollEnabled={orientation === 'horizonal'} | 72 scrollEnabled={orientation === 'horizontal'} |
73 showsHorizontalScrollIndicator={false} 74 horizontal={orientation === 'vertical'} 75 contentContainerStyle={ 76 orientation === 'vertical' 77 ? style.contentWrapper | 73 showsHorizontalScrollIndicator={false} 74 horizontal={orientation === 'vertical'} 75 contentContainerStyle={ 76 orientation === 'vertical' 77 ? style.contentWrapper |
78 : style.horizonalContentWrapper | 78 : style.horizontalContentWrapper |
79 }> 80 {actionButtons.map(action => ( 81 <ActionButton key={action.title} {...action} /> 82 ))} 83 </ScrollView> 84 ); 85} 86 87const style = StyleSheet.create({ 88 wrapper: { 89 marginTop: rpx(20), 90 marginBottom: rpx(20), 91 flexGrow: 0, 92 flexShrink: 0, 93 }, | 79 }> 80 {actionButtons.map(action => ( 81 <ActionButton key={action.title} {...action} /> 82 ))} 83 </ScrollView> 84 ); 85} 86 87const style = StyleSheet.create({ 88 wrapper: { 89 marginTop: rpx(20), 90 marginBottom: rpx(20), 91 flexGrow: 0, 92 flexShrink: 0, 93 }, |
94 horizonalWrapper: { | 94 horizontalWrapper: { |
95 marginTop: rpx(20), 96 marginBottom: rpx(20), 97 flexGrow: 0, 98 flexShrink: 0, 99 }, 100 contentWrapper: { 101 flexDirection: 'row', 102 height: rpx(144), 103 paddingHorizontal: rpx(24), 104 }, | 95 marginTop: rpx(20), 96 marginBottom: rpx(20), 97 flexGrow: 0, 98 flexShrink: 0, 99 }, 100 contentWrapper: { 101 flexDirection: 'row', 102 height: rpx(144), 103 paddingHorizontal: rpx(24), 104 }, |
105 horizonalContentWrapper: { | 105 horizontalContentWrapper: { |
106 width: rpx(170), 107 flexDirection: 'column', 108 paddingVertical: rpx(24), 109 paddingLeft: rpx(15), 110 }, 111}); | 106 width: rpx(170), 107 flexDirection: 'column', 108 paddingVertical: rpx(24), 109 paddingLeft: rpx(15), 110 }, 111}); |