Add watermark components.

Author: supervons

App.tsx

@@ -9,17 +9,18 @@
  * @format
  * @flow
  */
+import * as Sentry from "@sentry/react-native";
 import React, { useEffect } from "react";
+import { BackHandler, Platform, StatusBar } from "react-native";
+import { RootSiblingParent } from "react-native-root-siblings";
 import { Provider } from "react-redux";
-import { StatusBar, BackHandler, Platform } from "react-native";
 import { PersistGate } from "redux-persist/integration/react";
-import { RootSiblingParent } from "react-native-root-siblings";
-import { HomeStackScreen } from "~/routers/index";
+import I18n from "~/common/languages";
 import Loading from "~/common/loading";
-import configureStore from "~/redux/store/store";
 import Toast from "~/components/toast";
-import I18n from "~/common/languages";
-import * as Sentry from "@sentry/react-native";
+import Watermark from "~/components/Watermark";
+import configureStore from "~/redux/store/store";
+import { HomeStackScreen } from "~/routers/index";
 Sentry.init({
   dsn: "https://your@your.ingest.us.sentry.io/0000", // replace your sentry DSN.
 });
@@ -70,6 +71,7 @@ const APP = function () {
         <RootSiblingParent>
           <HomeStackScreen />
         </RootSiblingParent>
+        <Watermark />
         <Loading />
       </PersistGate>
     </Provider>

src/components/Watermark.tsx

@@ -0,0 +1,71 @@
+import React from 'react';
+import { Dimensions, StyleSheet, Text, View } from 'react-native';
+import { useSelector } from 'react-redux';
+
+interface WatermarkProps {
+  text?: string;
+  opacity?: number;
+  rotate?: string;
+  colors?: string[];
+}
+/**
+ * A component used to add watermark effects to the application.
+ * @param {WatermarkProps} props - Properties for the watermark component
+ * @param {string} props.text
+ * @param {number} props.opacity
+ * @param {string} props.rotate
+ */
+const Watermark: React.FC<WatermarkProps> = (props) => {
+  // 从Redux状态中获取水印设置
+  const { text, opacity, rotate, colors } = useSelector(state => state.WatermarkReducer);
+  const { width, height } = Dimensions.get('window');
+  const rows = Math.ceil(height / 100);
+  const cols = Math.ceil(width / 200);
+
+  return (
+    <View style={styles.container}>
+      {Array.from({ length: rows }).map((_, rowIndex) =>
+        Array.from({ length: cols }).map((_, colIndex) => (
+          <View
+            key={`${rowIndex}-${colIndex}`}
+            style={[
+              styles.watermarkItem,
+              {
+                top: rowIndex * 100,
+                left: colIndex * 200,
+                opacity,
+                transform: [{ rotate }],
+              },
+            ]}>
+            <Text>
+              {text}
+            </Text>
+          </View>
+        ))
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    pointerEvents: 'none',
+  },
+  watermarkItem: {
+    position: 'absolute',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  gradient: {
+    padding: 8,
+    borderRadius: 4,
+    fontSize: 16,
+  },
+});
+
+export default Watermark;

src/redux/action/watermarkActionTypes.ts

@@ -0,0 +1,35 @@
+/**
+ * Created by Trae AI on 2023.
+ * 水印相关的Redux action类型
+ * Watermark related Redux action types
+ */
+
+/**
+ * 设置水印文本
+ * Set watermark text
+ */
+export const SET_WATERMARK_TEXT = "SET_WATERMARK_TEXT";
+
+/**
+ * 设置水印透明度
+ * Set watermark opacity
+ */
+export const SET_WATERMARK_OPACITY = "SET_WATERMARK_OPACITY";
+
+/**
+ * 设置水印旋转角度
+ * Set watermark rotation
+ */
+export const SET_WATERMARK_ROTATE = "SET_WATERMARK_ROTATE";
+
+/**
+ * 设置水印颜色
+ * Set watermark colors
+ */
+export const SET_WATERMARK_COLORS = "SET_WATERMARK_COLORS";
+
+/**
+ * 重置水印设置为默认值
+ * Reset watermark settings to default
+ */
+export const RESET_WATERMARK = "RESET_WATERMARK";

src/redux/action/watermarkActions.ts

@@ -0,0 +1,55 @@
+/**
+ * Created by Trae AI on 2023.
+ * 水印相关的Redux actions
+ * Watermark related Redux actions
+ */
+import {
+  SET_WATERMARK_TEXT,
+  SET_WATERMARK_OPACITY,
+  SET_WATERMARK_ROTATE,
+  SET_WATERMARK_COLORS,
+  RESET_WATERMARK
+} from './watermarkActionTypes';
+
+/**
+ * 设置水印文本
+ * @param text 水印文本
+ */
+export const setWatermarkText = (text: string) => ({
+  type: SET_WATERMARK_TEXT,
+  text
+});
+
+/**
+ * 设置水印透明度
+ * @param opacity 透明度值 (0-1)
+ */
+export const setWatermarkOpacity = (opacity: number) => ({
+  type: SET_WATERMARK_OPACITY,
+  opacity
+});
+
+/**
+ * 设置水印旋转角度
+ * @param rotate 旋转角度 (例如: '-45deg')
+ */
+export const setWatermarkRotate = (rotate: string) => ({
+  type: SET_WATERMARK_ROTATE,
+  rotate
+});
+
+/**
+ * 设置水印颜色
+ * @param colors 颜色数组
+ */
+export const setWatermarkColors = (colors: string[]) => ({
+  type: SET_WATERMARK_COLORS,
+  colors
+});
+
+/**
+ * 重置水印设置为默认值
+ */
+export const resetWatermark = () => ({
+  type: RESET_WATERMARK
+});

src/redux/reducer/index.ts

@@ -3,6 +3,7 @@ import UserReducer from "./userReducer";
 import SettingReducer from "./settingReducer";
 import HookReducer from "./hookReducer";
 import InteractionReducer from "./interactionReducer";
+import WatermarkReducer from "./watermarkReducer";
 
 /**
  * Created by supervons on 2019/08/20.
@@ -14,6 +15,7 @@ const rootReducer = combineReducers({
   SettingReducer,
   HookReducer,
   InteractionReducer,
+  WatermarkReducer,
 });
 
 export default rootReducer;

src/redux/reducer/watermarkReducer.ts

@@ -0,0 +1,64 @@
+/**
+ * Created by Trae AI on 2023.
+ * 水印相关的Redux reducer
+ * Watermark related Redux reducer
+ */
+import { handleActions } from "redux-actions";
+import {
+  RESET_WATERMARK,
+  SET_WATERMARK_COLORS,
+  SET_WATERMARK_OPACITY,
+  SET_WATERMARK_ROTATE,
+  SET_WATERMARK_TEXT,
+} from "../action/watermarkActionTypes";
+
+// 初始化水印状态
+// Initialize watermark state
+const initialState = {
+  text: "探索 RN",
+  opacity: 0.2,
+  rotate: "-45deg",
+  colors: [],
+};
+
+const handler = {};
+
+handler[SET_WATERMARK_TEXT] = (state, action) => {
+  const { text } = action;
+  return {
+    ...state,
+    text,
+  };
+};
+
+handler[SET_WATERMARK_OPACITY] = (state, action) => {
+  const { opacity } = action;
+  return {
+    ...state,
+    opacity,
+  };
+};
+
+handler[SET_WATERMARK_ROTATE] = (state, action) => {
+  const { rotate } = action;
+  return {
+    ...state,
+    rotate,
+  };
+};
+
+handler[SET_WATERMARK_COLORS] = (state, action) => {
+  const { colors } = action;
+  return {
+    ...state,
+    colors,
+  };
+};
+
+handler[RESET_WATERMARK] = () => {
+  return {
+    ...initialState,
+  };
+};
+
+export default handleActions(handler, initialState);

src/redux/store/store.js

@@ -3,18 +3,18 @@
  * 对 redux 进行配置，增加 redux-persist 对 whitelist 中的数据作缓存（以 reducer 为单位）
  * Configure redux and add redux-persist to cache data in whitelist (in reducer)
  */
-import { createStore, applyMiddleware, compose } from "redux";
-import thunk from "redux-thunk";
-import rootReducer from "../reducer";
-import { persistStore, persistReducer } from "redux-persist";
 import AsyncStorage from "@react-native-community/async-storage";
+import { applyMiddleware, compose, createStore } from "redux";
 import logger from "redux-logger";
+import { persistReducer, persistStore } from "redux-persist";
+import thunk from "redux-thunk";
+import rootReducer from "../reducer";
 const middleWares = [thunk];
 
 const persistConfig = {
   key: "root", // 对于数据 key 的定义
   storage: AsyncStorage, // 选择的存储引擎
-  whitelist: ["UserReducer", "SettingReducer"], // 白名单，位于数组中的会被缓存
+  whitelist: ["UserReducer", "SettingReducer", "WatermarkReducer"], // 白名单，位于数组中的会被缓存
 };
 
 // 对 reducers 的封装处理