add app/pages/home/MapUI.js

Strides-SPAPP/app/pages/home/MapUI.js

@@ -0,0 +1,137 @@
+/**
+ * 首页地图定制布局
+ * @邠心vbe on 2023/09/01
+ */
+import React from 'react';
+import { View, Pressable, Image, StyleSheet } from 'react-native';
+import Toolbar, { BackButton, Styles } from '../../components/Toolbar';
+import { PageList } from '../Router';
+import BottomSiteInfo from './maps/BottomSiteInfo';
+import Maps from './maps/Maps';
+import PinMessage from './maps/PinMessage';
+import SearchTool from './maps/SearchTool';
+
+export default MapUI = ({
+  state,
+  navigation,
+  onFilter,
+  onMapReady,
+  onFavorite,
+  onLocation,
+  onCloseInfo,
+  useApplesMap,
+  showUserLocation,
+  viewChargeStation,
+  pinMessages=[]
+}) => {
+  return (
+    <View style={ui.flex1}>
+      <Toolbar>
+        <BackButton
+          style={styles.navIcon}
+          onPress={() => {
+            navigation?.toggleDrawer();
+          }}>
+          <EvilIcons
+            name={'navicon'}
+            size={28}
+            color={colorPrimary}
+            style={{width: 28, height: 28, lineHeight: 28}} />
+        </BackButton>
+        <View style={styles.logoView}>
+          <Image
+            source={require('../../images/tool-logo.png')}
+            style={Styles.logo}
+            resizeMode="contain"
+          />
+        </View>
+        {/* <Text style={ui.flex1}></Text> */}
+        <BackButton
+          style={styles.navIcon}
+          onPress={() => startPage(PageList.scanqr, {actionDetail: true})}>
+          <MaterialCommunityIcons
+            name='line-scan'
+            size={20}
+            color={colorPrimary}
+          />
+        </BackButton>
+      </Toolbar>
+      <SearchTool
+        count={state.stopList?.length}
+        mapReady={state.mapReady}
+        onFilter={onFilter}
+        onLocation={onLocation}
+        navigation={navigation}
+      />
+      <PinMessage messageList={pinMessages}/>
+      <View style={styles.mapContent}>
+        { !state.isHide &&
+          <Maps.MapOnly
+            ready={state.mapReady}
+            region={state.region}
+            stopList={state.stopList}
+            onMapReady={onMapReady}
+            useApplesMap={useApplesMap}
+            onMarkerPress={viewChargeStation}
+            showUserLocation={showUserLocation}
+          />
+        }
+        <BottomSiteInfo
+          visible={state.showStation}
+          stationInfo={state.stationInfo}
+          onFavorite={onFavorite}
+          onClose={onCloseInfo}
+        />
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  logoView: {
+    /*left: 0,
+    right: 0,
+    bottom: 0,
+    zIndex: 1,
+    alignItems: 'center',
+    position: 'absolute',*/
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  navIcon: {
+    width: 42,
+    height: 42,
+    marginLeft: 4,
+    marginRight: 2,
+    alignItems: 'center',
+    flexDirection: 'row',
+    justifyContent: 'center'
+  },
+  searchView: {
+    ...$padding(8, 16, 16),
+    backgroundColor: colorThemes
+  },
+  searchInput: {
+    alignItems: 'center',
+    borderWidth: 1,
+    borderStyle: 'solid',
+    borderRadius: 60,
+    borderColor: colorAccent,
+    flexDirection: 'row',
+    paddingLeft: 16,
+    paddingRight: 16,
+    backgroundColor: 'rgba(255, 255, 255, 0.5)'
+  },
+  searchText: {
+    flex: 1,
+    color: '#444',
+    padding: 8,
+    fontSize: 15
+  },
+  mapContent: {
+    flex: 1,
+    zIndex: 4,
+    position: 'relative',
+  }
+})