add app/pages/transaction/Transaction.js

Strides-SPAPP/app/pages/transaction/Transaction.js

@@ -0,0 +1,109 @@
+/**
+ * 历史交易页面
+ * @邠心vbe on 2024/05/16
+ */
+import React, { Component, useState } from 'react';
+import { ScrollView, StyleSheet, RefreshControl } from 'react-native';
+import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
+import HistoryList from './HistoryList';
+import OverviewV2 from '../wallet/OverviewV2';
+import PointsHistory from './PointsHistory';
+import app from '../../../app.json';
+import { MyRefreshProps } from '../../components/ThemesConfig';
+
+const TabOverView = () => {
+  const [refresh, setRefresh] = useState(false)
+  return (
+    <ScrollView
+      style={styles.container}
+      contentContainerStyle={$padding(16,0)}
+      refreshControl={
+        <RefreshControl
+          {...MyRefreshProps()}
+          refreshing={refresh}
+          onRefresh={() => setRefresh(true)}
+        />
+      }>
+      <OverviewV2
+        atAglance={false}
+        skeleton={false}
+        refresh={refresh}
+        isTabPage={true}
+        refreshed={() => setRefresh(false)}
+        shown={true}/>
+    </ScrollView>
+  )
+}
+
+export default class Transaction extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      pageAdapter: [{
+        title: $t('wallet.tabOverview'),
+        name: "Overview",
+        component: TabOverView
+      },{
+        title: $t('wallet.tabHistory'),
+        name: "History",
+        component: HistoryList
+      },{
+        title: $t('points.points'),
+        name: "Points",
+        component: PointsHistory
+      }]
+    };
+    this.tabBarStyle = {
+      tabBarStyle: styles.tabStyle,
+      tabBarPressColor: rippleColor,
+      tabBarScrollEnabled: false,
+      tabBarIndicatorStyle: styles.indicator,
+      tabBarActiveTintColor: tabBarTextActive,
+      tabBarInactiveTintColor: tabBarTextInactive
+    }
+  }
+
+  backPage() {
+    startPage(PageList.home);
+    return true;
+  }
+
+  render() {
+    const Tab = createMaterialTopTabNavigator();
+    return (
+      <Tab.Navigator
+        style={styles.container}
+          screenOptions={{
+            lazy: false,
+            lazyPreloadDistance: 1,
+            ...this.tabBarStyle
+          }}
+          backBehavior={() => this.backPage()}>
+        { this.state.pageAdapter.map((item, index) => 
+          <Tab.Screen
+            key={index}
+            name={item.name}
+            component={item.component}
+            options={{
+              title: item.title,
+              tabBarAllowFontScaling: false
+            }}
+          />
+        )}
+      </Tab.Navigator>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: colorLight
+  },
+  tabStyle: {
+    backgroundColor: app.isWhitelabel ? colorLight : colorPrimary
+  },
+  indicator: {
+    backgroundColor: app.isWhitelabel ? colorPrimary : colorLight
+  }
+})