Merge pull request #38 from funnyzak/refactor/screen

funnyzak · web-flow · commit b7b2f82ddc9a · 2022-04-15T12:06:39.000+08:00
diff --git a/README.md b/README.md
@@ -39,7 +39,7 @@
 - [x] 规划重新设计 UI 交互
 - [x] 界面语言文案修正
 - [x] 整理项目所使用开源库
-- [ ] 全新开发
+- [x] 全新开发
 - [ ] 评论列表
 - [ ] 升级提醒
 - [ ] 通知模块
diff --git a/ios/app.xcodeproj/project.pbxproj b/ios/app.xcodeproj/project.pbxproj
@@ -484,15 +484,15 @@
 				ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
 				ASSETCATALOG_COMPILER_INCLUDE_ALL_APPICON_ASSETS = YES;
 				CLANG_ENABLE_MODULES = YES;
-				CURRENT_PROJECT_VERSION = 7;
+				CURRENT_PROJECT_VERSION = 8;
 				DEVELOPMENT_TEAM = ED4U2734MB;
 				ENABLE_BITCODE = NO;
 				INFOPLIST_FILE = app/Info.plist;
 				LD_RUNPATH_SEARCH_PATHS = (
 					"$(inherited)",
 					"@executable_path/Frameworks",
 				);
-				MARKETING_VERSION = 0.5.3;
+				MARKETING_VERSION = 0.5.5;
 				OTHER_LDFLAGS = (
 					"$(inherited)",
 					"-ObjC",
@@ -515,24 +515,24 @@
 				ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
 				ASSETCATALOG_COMPILER_INCLUDE_ALL_APPICON_ASSETS = YES;
 				CLANG_ENABLE_MODULES = YES;
-				CODE_SIGN_IDENTITY = "Apple Development";
-				CODE_SIGN_STYLE = Automatic;
-				CURRENT_PROJECT_VERSION = 7;
-				DEVELOPMENT_TEAM = "";
+				CODE_SIGN_IDENTITY = "iPhone Distribution";
+				CODE_SIGN_STYLE = Manual;
+				CURRENT_PROJECT_VERSION = 8;
+				DEVELOPMENT_TEAM = ED4U2734MB;
 				INFOPLIST_FILE = app/Info.plist;
 				LD_RUNPATH_SEARCH_PATHS = (
 					"$(inherited)",
 					"@executable_path/Frameworks",
 				);
-				MARKETING_VERSION = 0.5.3;
+				MARKETING_VERSION = 0.5.5;
 				OTHER_LDFLAGS = (
 					"$(inherited)",
 					"-ObjC",
 					"-lc++",
 				);
 				PRODUCT_BUNDLE_IDENTIFIER = github.funnyzak.v2ex;
 				PRODUCT_NAME = app;
-				PROVISIONING_PROFILE_SPECIFIER = "";
+				PROVISIONING_PROFILE_SPECIFIER = "v2ex app dis m1";
 				SWIFT_VER6.0 = SWIFT_VER6.0;
 				SWIFT_VERSION = 6.0;
 				TARGETED_DEVICE_FAMILY = "1,2";
diff --git a/src/assets/images/icons/header/refresh.png b/src/assets/images/icons/header/refresh.png
diff --git a/src/assets/images/icons/header/refresh@2x.png b/src/assets/images/icons/header/refresh@2x.png
diff --git a/src/assets/images/icons/header/refresh@3x.png b/src/assets/images/icons/header/refresh@3x.png
diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json
@@ -87,7 +87,7 @@
     "activeLatest": "Last actived at $ ",
     "favorited": "Favorited",
     "joinSinceTime": "Joined from",
-    "joinV2exSinceTime": "Become a V2EX member from $",
+    "joinV2exSinceTime": "V2EXer #$, joined on $.",
     "noLogin": "Not logged in",
     "posdedTopics": "Topics posted by $",
     "openApp": "Open APP",
diff --git a/src/i18n/locales/zh.json b/src/i18n/locales/zh.json
@@ -87,7 +87,7 @@
     "activeLatest": "最近活跃于 $。",
     "favorited": "收藏了",
     "joinSinceTime": "加入于",
-    "joinV2exSinceTime": "从 $ 成为V2EX一员。",
+    "joinV2exSinceTime": "第 $ 号会员，加入于 $。",
     "noLogin": "未登陆",
     "posdedTopics": "$ 发布的主题",
     "openApp": "打开APP",
diff --git a/src/navigation/Navigator.tsx b/src/navigation/Navigator.tsx
@@ -74,7 +74,12 @@ const defaultScreenOptions = (theme: ITheme): NativeStackNavigationOptions => ({
   headerBackground: () => defaultHeaderBackground(theme),
   headerBackTitle: undefined,
   headerTintColor: theme.colors.appbarTint,
-  headerBackTitleVisible: false
+  headerBackTitleVisible: false,
+
+  // screen main content style
+  contentStyle: {
+    backgroundColor: theme.colors.background
+  }
 })
 
 const resetLocales = (locale: LanguageTagType) => {
@@ -121,6 +126,7 @@ const renderBottomIcon = (focused: boolean, activeIcon: any, inactiveIcon: any):
 
 const defaultTabBarSetting = (theme: ITheme, insets: EdgeInsets) => {
   return {
+    ...defaultScreenOptions,
     headerShown: false,
     tabBarActiveTintColor: theme.colors.tabBarIconActive,
     tabBarInactiveTintColor: theme.colors.tabBarIconInactive,
@@ -155,6 +161,7 @@ const MainAppNavigator = ({ navigation, route }: MainScreenProps) => {
         options={{
           title: translate(`router.${ROUTES.HotTopics}`),
           ...defaultTabBarSetting(theme, insets),
+
           tabBarIcon: ({ focused }) =>
             renderBottomIcon(
               focused,
diff --git a/src/screens/common/WebLink.tsx b/src/screens/common/WebLink.tsx
@@ -1,6 +1,6 @@
-import React, { useEffect, useLayoutEffect, useMemo } from 'react'
+import React, { useEffect, useLayoutEffect, useMemo, useRef } from 'react'
 import { View } from 'react-native'
-import { WebView } from 'react-native-webview'
+import { WebView, WebViewProps } from 'react-native-webview'
 
 import { useTheme, SylCommon } from '@src/theme'
 import { WebViewerScreenProps as ScreenProps } from '@src/navigation/routes'
@@ -11,6 +11,7 @@ import { translate } from '@src/i18n'
 
 const WebLink = ({ route, navigation }: ScreenProps) => {
   const { theme } = useTheme()
+  const webViewRef = useRef(new WebView<{ current?: any }>({}))
   const [loading, setLoading] = React.useState(true)
   const url = useMemo(
     () => (!route.params.url.startsWith('http') ? `http://${route.params.url}` : route.params.url),
@@ -26,12 +27,22 @@ const WebLink = ({ route, navigation }: ScreenProps) => {
   useLayoutEffect(() => {
     navigation.setOptions({
       headerRight: () => (
-        <HeaderButton
-          source={theme.assets.images.icons.header.link}
-          onPress={() => {
-            linking(url)
-          }}
-        />
+        <>
+          <HeaderButton
+            containerStyle={[{ marginRight: theme.spacing.tiny }]}
+            source={theme.assets.images.icons.header.refresh}
+            onPress={() => {
+              setLoading(true)
+              webViewRef.current.reload()
+            }}
+          />
+          <HeaderButton
+            source={theme.assets.images.icons.header.link}
+            onPress={() => {
+              linking(url)
+            }}
+          />
+        </>
       )
     })
   }, [navigation])
@@ -40,6 +51,7 @@ const WebLink = ({ route, navigation }: ScreenProps) => {
     <View style={[SylCommon.Layout.fill, SylCommon.View.background(theme)]}>
       {loading && <Spinner text={translate('placeholder.loading')} />}
       <WebView
+        ref={webViewRef}
         originWhitelist={['*']}
         source={{ uri: url }}
         onLoad={(syntheticEvent) => {
diff --git a/src/screens/components/common/General.tsx b/src/screens/components/common/General.tsx
@@ -13,7 +13,8 @@ import {
   TextStyle,
   TouchableOpacity,
   ViewStyle,
-  Pressable
+  Pressable,
+  StyleProp
 } from 'react-native'
 import { IState } from '@src/types'
 import { translate } from '@src/i18n'
@@ -82,11 +83,13 @@ const BorderLine = () => {
 }
 
 const HeaderButton = ({
+  containerStyle: style,
   source,
   onPress,
   text,
   textColor
 }: {
+  containerStyle?: StyleProp<ViewStyle>
   source?: ImageSourcePropType
   text?: string
   textColor?: string
@@ -95,7 +98,7 @@ const HeaderButton = ({
   const { theme } = useTheme()
 
   return (
-    <Pressable onPress={onPress}>
+    <Pressable onPress={onPress} style={style}>
       {source && <Image source={source} width={24} />}
       {text && <Text style={styles.headerText(theme, textColor)}>{text}</Text>}
     </Pressable>
@@ -120,7 +123,7 @@ const Footer = () => {
 
 const styles = {
   headerText: (theme: ITheme, textColor?: string): TextStyle => ({
-    ...theme.typography.bodyText,
+    ...theme.typography.subheadingText,
     color: textColor ?? theme.colors.secondary
   }),
   footer: (theme: ITheme): ViewStyle => ({
diff --git a/src/screens/components/profile/ProfileInfo.tsx b/src/screens/components/profile/ProfileInfo.tsx
@@ -147,7 +147,9 @@ const ProfileInfo: React.FC<ProfileInfoProps> = ({
             </View>
             {profile?.created ? (
               <Text style={[styles.infoItem(theme), theme.typography.captionText]}>
-                {translate('label.joinV2exSinceTime').replace('$', dayjs(profile?.created * 1000).format())}
+                {translate('label.joinV2exSinceTime')
+                  .replace('$', profile?.id.toString())
+                  .replace('$', dayjs(profile?.created * 1000).format())}
               </Text>
             ) : null}
           </>
diff --git a/src/screens/home/HomeTabs.tsx b/src/screens/home/HomeTabs.tsx
@@ -22,6 +22,11 @@ const TopicTabList = ({}: HomeTabsScreenProps) => {
       initialLayout={{ width: theme.dimens.WINDOW_WIDTH }}
       tabBarPosition="top"
       initialRouteName={`NODE-${tabs[0].name}`}
+      sceneContainerStyle={[
+        {
+          backgroundColor: theme.colors.background
+        }
+      ]}
       screenOptions={{
         lazy: true,
         tabBarActiveTintColor: theme.colors.tabActiveTintColor,
diff --git a/src/screens/profile/Profile.tsx b/src/screens/profile/Profile.tsx
@@ -53,7 +53,7 @@ const Profile = ({
   }, [navigation, profile])
 
   return (
-    <View>
+    <View style={SylCommon.Layout.fill}>
       <View style={[SylCommon.Card.container(theme), styles.container(theme)]}>
         {profile ? (
           <ProfileInfo profile={profile} styleType="full" />
diff --git a/src/screens/topic/HomeTabNodeTopicList.tsx b/src/screens/topic/HomeTabNodeTopicList.tsx
@@ -7,6 +7,7 @@ import { SetStatusBar, TopicList } from '../components'
 import { NodeTopicsScreenProps as ScreenProps, ROUTES } from '@src/navigation'
 import * as Actions from '@src/actions'
 import { useToast } from '@src/components/toast'
+import { SylCommon, themes, useTheme } from '@src/theme'
 
 const NodeTopics = ({
   route,
@@ -17,6 +18,7 @@ const NodeTopics = ({
   tabNodeList: IState.TabNodeState[]
   getNodeTopics: (node: string, page: number) => void
 }) => {
+  const { theme } = useTheme()
   const [page, setPage] = useState(1)
   const [mounted, setMounted] = useState<boolean>(false)
 
@@ -73,7 +75,13 @@ const NodeTopics = ({
   }
 
   return (
-    <>
+    <View
+      style={[
+        SylCommon.Layout.fill,
+        {
+          backgroundColor: theme.colors.background
+        }
+      ]}>
       <SetStatusBar />
       <TopicList
         topics={list}
@@ -84,7 +92,7 @@ const NodeTopics = ({
         searchIndicator={false}
         refreshCallback={onRefresh}
       />
-    </>
+    </View>
   )
 }
 
diff --git a/src/theme/light/assets.ts b/src/theme/light/assets.ts
@@ -32,7 +32,8 @@ const Assets: IThemeAssets = {
         star: require('@res/images/icons/header/star.png'),
         heart: require('@res/images/icons/header/heart.png'),
         logout: require('@res/images/icons/header/logout.png'),
-        link: require('@res/images/icons/header/urlscheme.png')
+        link: require('@res/images/icons/header/urlscheme.png'),
+        refresh: require('@res/images/icons/header/refresh.png')
       },
       node: {
         docment: require('@res/images/icons/node/document.png'),
diff --git a/src/theme/types.ts b/src/theme/types.ts
@@ -217,6 +217,7 @@ export interface IThemeAssets {
         heart: ImageSourcePropType
         link: ImageSourcePropType
         logout: ImageSourcePropType
+        refresh: ImageSourcePropType
       }
       node: {
         docment: ImageSourcePropType
