iOS UI Enhancement

Strides-APP/app/components/Toolbar.js

@@ -29,7 +29,12 @@ export const BackButton = ({style=Styles.backIcon, color=pageTitleTint, children
 }
 
 export const BackIcon = ({color=pageTitleTint}) => {
-  return <MaterialIcons name={isIOS ? 'arrow-back-ios' : 'arrow-back'} size={24} color={color} />
+  return (
+    <MaterialIcons
+      name={isIOS ? 'arrow-back-ios' : 'arrow-back'}
+      size={isIOS ? 20 : 24}
+      color={color}/>
+  )
 }
 
 export const StationBack = ({bottom = 24, scale=1.0}) => {
@@ -88,8 +93,8 @@ export default Toolbar = ({
 export const Styles = StyleSheet.create({
   toolbar: {
     height: toolbarSize + statusHeight,
-    paddingLeft: 2,
-    paddingRight: 2,
+    paddingLeft: isIOS ? 0 : 2,
+    paddingRight: isIOS ? 0 : 2,
     paddingTop: statusHeight,
     alignItems: 'center',
     flexDirection: 'row',
@@ -123,6 +128,7 @@ export const Styles = StyleSheet.create({
   titleText: {
     flex: 1,
     color: pageTitleTint,
-    paddingLeft: isIOS ? 8 : 16
+    paddingLeft: isIOS ? 8 : 16,
+    textAlign: isIOS ? 'center' : 'left'
   }
 });

Strides-APP/app/pages/alert/ViewAlerts.js

@@ -80,6 +80,16 @@ export default class ViewAlerts extends Component {
           {width: '100%', height: 15, marginTop: 8},
           {width: '100%', height: 15, marginTop: 8},
           {width: '100%', height: 15, marginTop: 8},
+          {width: '30%', height: 15, marginTop: 8},
+          {width: '100%', height: 15, marginTop: 24},
+          {width: '100%', height: 15, marginTop: 8},
+          {width: '100%', height: 15, marginTop: 8},
+          {width: '100%', height: 15, marginTop: 8},
+          {width: '30%', height: 15, marginTop: 8},
+          {width: '100%', height: 15, marginTop: 24},
+          {width: '100%', height: 15, marginTop: 8},
+          {width: '100%', height: 15, marginTop: 8},
+          {width: '100%', height: 15, marginTop: 8},
           {width: '30%', height: 15, marginTop: 8}
         ]}
         animationDirection={"horizontalRight"}>

Strides-APP/app/pages/alert/ViewArticle.js

@@ -3,7 +3,7 @@
  * @邠心vbe on 2023/10/24
  */
 import React, { Component } from 'react';
-import { View,  StyleSheet, Image, ScrollView, Linking, Animated } from 'react-native';
+import { View,  StyleSheet, Image, ScrollView, Linking, Animated, Easing } from 'react-native';
 import Swiper from 'react-native-swiper';
 import apiArticle from '../../api/apiArticle';
 import TextView from '../../components/TextView';
@@ -25,7 +25,7 @@ export default class ViewArticle extends Component {
         articleTitle: "",
         articleContent: ""
       },
-      opacity: 1
+      opacity: new Animated.Value(0)
     };
   }
 
@@ -75,14 +75,16 @@ export default class ViewArticle extends Component {
 
   onScrollView(e) {
     if (e.nativeEvent.contentOffset) {
-      const isR = e.nativeEvent.contentOffset.y >= $vw(91);
+      const isR = e.nativeEvent.contentOffset.y >= $vw(95);
       if (isR != this.state.showTitleBar) {
         this.setState({
-          opacity: new Animated.Value(0),
           showTitleBar: isR
-        }, () => {
-          this.startTitleAnimate();
         });
+        if (isR) {
+          this.startTitleAnimate();
+        } else {
+          this.hideTitleAnimate();
+        }
         MyStatusBar.setStatusBarTheme(isR ? MyStatusBar.DEFAULT_STYLE : MyStatusBar.LIGHT_STYLE);
       }
     }
@@ -91,7 +93,18 @@ export default class ViewArticle extends Component {
   startTitleAnimate() {
     Animated.timing(this.state.opacity, {
       toValue: 1,
-      duration: 200,
+      duration: 250,
+      easing: Easing.linear,
+      useNativeDriver: true
+    }).start(() => {
+      
+    });
+  }
+
+  hideTitleAnimate() {
+    Animated.timing(this.state.opacity, {
+      toValue: 0,
+      duration: 250,
       easing: Easing.linear,
       useNativeDriver: true
     }).start(() => {
@@ -118,6 +131,11 @@ export default class ViewArticle extends Component {
               {width: '100%', height: 15, marginTop: 8},
               {width: '100%', height: 15, marginTop: 8},
               {width: '100%', height: 15, marginTop: 8},
+              {width: '30%', height: 15, marginTop: 8},
+              {width: '100%', height: 15, marginTop: 24},
+              {width: '100%', height: 15, marginTop: 8},
+              {width: '100%', height: 15, marginTop: 8},
+              {width: '100%', height: 15, marginTop: 8},
               {width: '30%', height: 15, marginTop: 8}
             ]}
             animationDirection={"horizontalRight"}/>
@@ -128,8 +146,8 @@ export default class ViewArticle extends Component {
         <>
         <ScrollView
           style={styles.container}
-          contentContainerStyle={$padding(0,0,32)}
-          stickyHeaderIndices={[utils.isNotEmpty(this.state.messageInfo.articleImages) ? 1 : 0]}>
+          onScroll={e => this.onScrollView(e)}
+          contentContainerStyle={$padding(0,0,32)}>
           { utils.isNotEmpty(this.state.messageInfo.articleImages) &&
             <Swiper
               style={{height: $width}}
@@ -202,11 +220,13 @@ export default class ViewArticle extends Component {
           }
           <EndView/>
         </ScrollView>
+        { !this.state.showTitleBar &&
+          <View style={styles.toolbar}>
+            <BackButton style={styles.backIcon} color={"#F0F0F0"}/>
+          </View>
+        }
         <Animated.View style={[styles.toolbar, {opacity: this.state.opacity}]}>
-          { this.state.showTitleBar
-          ? <Toolbar title={this.state.messageInfo.articleTitle}/>
-          : <BackButton style={styles.backIcon} color={"#F0F0F0"}/>
-          }
+          <Toolbar title={this.state.messageInfo.articleTitle}/>
         </Animated.View>
         </>
       );
@@ -223,6 +243,7 @@ const styles = StyleSheet.create({
     top: 0,
     left: 0,
     right: 0,
+    zIndex: 2,
     position: 'absolute'
   },
   backIcon: {

Strides-APP/app/pages/alert/ViewCampaign.js

@@ -25,7 +25,7 @@ export default class ViewCampaign extends Component {
         articleTitle: "",
         articleContent: ""
       },
-      opacity: 1
+      opacity: new Animated.Value(0)
     };
   }
 
@@ -88,15 +88,17 @@ export default class ViewCampaign extends Component {
 
   onScrollView(e) {
     if (e.nativeEvent.contentOffset) {
-      const isR = e.nativeEvent.contentOffset.y >= $vw(91);
+      const isR = e.nativeEvent.contentOffset.y >= $vw(95);
       if (isR != this.state.showTitleBar) {
         this.setState({
-          opacity: new Animated.Value(0),
           showTitleBar: isR
-        }, () => {
-          this.startTitleAnimate();
         });
-        MyStatusBar.setStatusBarTheme(isR ? MyStatusBar.DARK_STYLE : MyStatusBar.LIGHT_STYLE);
+        if (isR) {
+          this.startTitleAnimate();
+        } else {
+          this.hideTitleAnimate();
+        }
+        MyStatusBar.setStatusBarTheme(isR ? MyStatusBar.DEFAULT_STYLE : MyStatusBar.LIGHT_STYLE);
       }
     }
   }
@@ -104,7 +106,18 @@ export default class ViewCampaign extends Component {
   startTitleAnimate() {
     Animated.timing(this.state.opacity, {
       toValue: 1,
-      duration: 200,
+      duration: 250,
+      easing: Easing.linear,
+      useNativeDriver: true
+    }).start(() => {
+      
+    });
+  }
+
+  hideTitleAnimate() {
+    Animated.timing(this.state.opacity, {
+      toValue: 0,
+      duration: 250,
       easing: Easing.linear,
       useNativeDriver: true
     }).start(() => {
@@ -131,6 +144,11 @@ export default class ViewCampaign extends Component {
               {width: '100%', height: 15, marginTop: 8},
               {width: '100%', height: 15, marginTop: 8},
               {width: '100%', height: 15, marginTop: 8},
+              {width: '30%', height: 15, marginTop: 8},
+              {width: '100%', height: 15, marginTop: 24},
+              {width: '100%', height: 15, marginTop: 8},
+              {width: '100%', height: 15, marginTop: 8},
+              {width: '100%', height: 15, marginTop: 8},
               {width: '30%', height: 15, marginTop: 8}
             ]}
             animationDirection={"horizontalRight"}/>
@@ -142,8 +160,7 @@ export default class ViewCampaign extends Component {
       <ScrollView
         style={styles.container}
         onScroll={e => this.onScrollView(e)}
-        contentContainerStyle={$padding(0,0,32)}
-        stickyHeaderIndices={[utils.isNotEmpty(this.state.messageInfo.articleImages) ? 1 : 0]}>
+        contentContainerStyle={$padding(0,0,32)}>
         { utils.isNotEmpty(this.state.messageInfo.articleImages) &&
           <Swiper
             style={{height: $width}}
@@ -233,11 +250,13 @@ export default class ViewCampaign extends Component {
         }
         <EndView/>
       </ScrollView>
+      { !this.state.showTitleBar &&
+        <View style={styles.toolbar}>
+          <BackButton style={styles.backIcon} color={"#F0F0F0"}/>
+        </View>
+      }
       <Animated.View style={[styles.toolbar, {opacity: this.state.opacity}]}>
-        { this.state.showTitleBar
-        ? <Toolbar title={this.state.messageInfo.articleTitle}/>
-        : <BackButton style={styles.backIcon} color={"#F0F0F0"}/>
-        }
+        <Toolbar title={this.state.messageInfo.articleTitle}/>
       </Animated.View>
       </>
     );
@@ -253,6 +272,7 @@ const styles = StyleSheet.create({
     top: 0,
     left: 0,
     right: 0,
+    zIndex: 2,
     position: 'absolute'
   },
   backIcon: {

Strides-APP/app/utils/constant.js

@@ -17,12 +17,14 @@ import geolocation from '@react-native-community/geolocation';
 
 navigator.geolocation = geolocation;
 
+global.isIOS = Platform.OS == 'ios';
+
 global.$width = Dimensions.get('window').width;
 global.$height = Dimensions.get('window').height;
-global.statusHeight = 0;
-global.toolbarSize = 56;
-global.isIOS = Platform.OS == 'ios';
-if (isIOS) {
+global.statusHeight = isIOS ? 20 : StatusBar.currentHeight;
+global.toolbarSize = isIOS ? 50 : 56;
+
+/*if (isIOS) {
   const {StatusBarManager} = NativeModules;
   StatusBarManager.getHeight(statusBarHeight => {
     const height = statusBarHeight.height;
@@ -33,7 +35,7 @@ if (isIOS) {
 } else {
   global.statusHeight = StatusBar.currentHeight;
   global.BRAND = DeviceInfo.getBrand().toLowerCase();
-}
+}*/
 
 if (Text.defaultProps == null)
   Text.defaultProps = {};