initial commit

.dockerignore

@@ -0,0 +1,9 @@
+node_modules
+.expo
+dist
+.git
+.gitignore
+.dockerignore
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

App.tsx

@@ -1,10 +1,15 @@
 import { StatusBar } from 'expo-status-bar';
-import { StyleSheet, Text, View } from 'react-native';
+import { StyleSheet, View } from 'react-native';
+import { MainScreen } from './src/components/MainScreen';
 
+/**
+ * 应用根组件 - 引入主屏幕
+ */
 export default function App() {
   return (
     <View style={styles.container}>
-      <Text>Open up App.tsx to start working on your app!</Text>
+      {/* 渲染主屏幕 */}
+      <MainScreen />
       <StatusBar style="auto" />
     </View>
   );
@@ -14,7 +19,5 @@ const styles = StyleSheet.create({
   container: {
     flex: 1,
     backgroundColor: '#fff',
-    alignItems: 'center',
-    justifyContent: 'center',
   },
 });

Dockerfile

@@ -0,0 +1,26 @@
+# 使用 Node.js LTS 版本作为基础镜像
+FROM node:20-slim
+
+# 设置工作目录
+WORKDIR /app
+
+# 安装必要的构建工具和 serve
+RUN npm install -g serve
+
+# 复制 package.json 和 package-lock.json
+COPY package*.json ./
+
+# 安装项目依赖
+RUN npm install
+
+# 复制项目源代码
+COPY . .
+
+# 构建 Web 版本
+RUN npx expo export --platform web
+
+# 暴露端口 (Hugging Face Spaces 默认使用 7860)
+EXPOSE 7860
+
+# 运行服务，将静态资源映射到 7860 端口
+CMD ["serve", "-s", "dist", "-l", "7860"]

README.md

@@ -0,0 +1,58 @@
+---
+title: 中文 React Native 项目
+emoji: 📱
+colorFrom: blue
+colorTo: indigo
+sdk: docker
+pinned: false
+short_description: "中文 React Native 项目：支持 iOS, Android 和 Web 的全平台适配示例"
+---
+
+# 中文 React Native 项目
+
+这是一个使用 **Expo** 构建的 React Native 示例项目。它被设计为兼顾移动平台（iOS, Android）和主流 Web 平台，并提供全面的中文本地化支持。
+
+## 项目特点
+
+- **全平台支持**：使用 React Native Web 实现一套代码，多端运行。
+- **中文汉化**：代码注释、UI 文本均采用中文，方便学习与二次开发。
+- **响应式布局**：针对不同屏幕尺寸进行优化，提供流畅的用户体验。
+- **Hugging Face 适配**：内置 `Dockerfile`，可直接在 Hugging Face Spaces 上作为 Docker 应用运行。
+
+## 本地开发指南
+
+### 前置条件
+
+确保已安装 [Node.js](https://nodejs.org/)。
+
+### 安装依赖
+
+```bash
+npm install
+```
+
+### 运行项目
+
+- **启动 Web 版** (默认浏览器打开):
+  ```bash
+  npm run web
+  ```
+
+- **启动 Expo 开发服务器** (支持扫码预览):
+  ```bash
+  npm start
+```
+
+## 项目结构
+
+- `App.tsx`: 应用程序入口
+- `src/components/MainScreen.tsx`: 核心展示页面 (包含详细中文注释)
+- `Dockerfile`: 用于 Hugging Face 部署的容器化配置
+- `app.json`: Expo 配置文件
+
+## 关于部署
+
+本项目已配置为在 Hugging Face Spaces 上使用 Docker 部署。容器将构建 Web 版本的静态资源，并使用 `serve` 在 `7860` 端口上提供服务。
+
+---
+由 Trae AI 生成并优化。

package.json

@@ -9,10 +9,13 @@
     "web": "expo start --web"
   },
   "dependencies": {
+    "@expo/metro-runtime": "~55.0.6",
     "expo": "~55.0.5",
     "expo-status-bar": "~55.0.4",
     "react": "19.2.0",
-    "react-native": "0.83.2"
+    "react-dom": "19.2.0",
+    "react-native": "0.83.2",
+    "react-native-web": "^0.21.0"
   },
   "devDependencies": {
     "@types/react": "~19.2.2",

src/components/MainScreen.tsx

@@ -0,0 +1,224 @@
+import React, { useState } from 'react';
+import { StyleSheet, Text, View, ScrollView, SafeAreaView, TouchableOpacity, Image, Switch } from 'react-native';
+import { StatusBar } from 'expo-status-bar';
+
+/**
+ * 主屏幕组件 - 采用中文显示与注释
+ * 包含计数器和主题切换功能
+ */
+export const MainScreen = () => {
+  const [count, setCount] = useState(0);
+  const [isDarkMode, setIsDarkMode] = useState(false);
+
+  // 主题样式定义
+  const theme = {
+    background: isDarkMode ? '#1C1C1E' : '#F5F7FA',
+    card: isDarkMode ? '#2C2C2E' : '#FFFFFF',
+    text: isDarkMode ? '#FFFFFF' : '#1C1C1E',
+    secondaryText: isDarkMode ? '#AEAEB2' : '#3A3A3C',
+    accent: '#007AFF',
+    border: isDarkMode ? '#3A3A3C' : '#E5E5EA',
+  };
+
+  return (
+    <SafeAreaView style={[styles.safeArea, { backgroundColor: theme.background }]}>
+      <StatusBar style={isDarkMode ? 'light' : 'dark'} />
+      <ScrollView contentContainerStyle={styles.scrollContainer}>
+        {/* 顶部标题栏 */}
+        <View style={[styles.header, { backgroundColor: theme.accent }]}>
+          <Text style={styles.headerTitle}>React Native 中文项目</Text>
+          <Text style={styles.headerSubtitle}>跨平台移动端 & Web 应用</Text>
+        </View>
+
+        {/* 核心功能展示区 */}
+        <View style={styles.content}>
+          {/* 主题切换卡片 */}
+          <View style={[styles.card, { backgroundColor: theme.card }]}>
+            <View style={styles.switchRow}>
+              <Text style={[styles.cardTitle, { color: theme.text, marginBottom: 0 }]}>
+                {isDarkMode ? '深色模式' : '浅色模式'}
+              </Text>
+              <Switch
+                value={isDarkMode}
+                onValueChange={setIsDarkMode}
+                trackColor={{ false: '#767577', true: '#34C759' }}
+                thumbColor={isDarkMode ? '#FFFFFF' : '#f4f3f4'}
+              />
+            </View>
+          </View>
+
+          {/* 交互计数器卡片 */}
+          <View style={[styles.card, { backgroundColor: theme.card }]}>
+            <Text style={[styles.cardTitle, { color: theme.text }]}>交互计数器</Text>
+            <View style={styles.counterContainer}>
+              <Text style={[styles.counterText, { color: theme.text }]}>{count}</Text>
+              <View style={styles.buttonRow}>
+                <TouchableOpacity 
+                  style={[styles.smallButton, { backgroundColor: theme.accent }]}
+                  onPress={() => setCount(count + 1)}
+                >
+                  <Text style={styles.smallButtonText}>增加</Text>
+                </TouchableOpacity>
+                <TouchableOpacity 
+                  style={[styles.smallButton, { backgroundColor: '#FF3B30' }]}
+                  onPress={() => setCount(0)}
+                >
+                  <Text style={styles.smallButtonText}>重置</Text>
+                </TouchableOpacity>
+              </View>
+            </View>
+          </View>
+
+          <View style={[styles.card, { backgroundColor: theme.card }]}>
+            <Text style={[styles.cardTitle, { color: theme.text }]}>项目特点</Text>
+            <View style={styles.featureItem}>
+              <Text style={[styles.featureDot, { color: theme.accent }]}>•</Text>
+              <Text style={[styles.featureText, { color: theme.secondaryText }]}>全面支持 iOS, Android 和 Web</Text>
+            </View>
+            <View style={styles.featureItem}>
+              <Text style={[styles.featureDot, { color: theme.accent }]}>•</Text>
+              <Text style={[styles.featureText, { color: theme.secondaryText }]}>中文界面与详细的代码注释</Text>
+            </View>
+            <View style={styles.featureItem}>
+              <Text style={[styles.featureDot, { color: theme.accent }]}>•</Text>
+              <Text style={[styles.featureText, { color: theme.secondaryText }]}>响应式布局，适配多种屏幕尺寸</Text>
+            </View>
+          </View>
+
+          {/* 交互示例 */}
+          <TouchableOpacity 
+            style={[styles.button, { backgroundColor: theme.accent }]}
+            onPress={() => alert('欢迎使用 React Native!')}
+          >
+            <Text style={styles.buttonText}>点击交互示例</Text>
+          </TouchableOpacity>
+
+          {/* 底部信息 */}
+          <View style={styles.footer}>
+            <Text style={[styles.footerText, { color: isDarkMode ? '#636366' : '#8E8E93' }]}>
+              © 2024 中文 React Native 项目
+            </Text>
+            <Text style={[styles.footerText, { color: isDarkMode ? '#636366' : '#8E8E93' }]}>
+              由 Trae AI 强力驱动
+            </Text>
+          </View>
+        </View>
+      </ScrollView>
+    </SafeAreaView>
+  );
+};
+
+const styles = StyleSheet.create({
+  safeArea: {
+    flex: 1,
+  },
+  scrollContainer: {
+    flexGrow: 1,
+  },
+  header: {
+    padding: 30,
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderBottomLeftRadius: 24,
+    borderBottomRightRadius: 24,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.1,
+    shadowRadius: 10,
+    elevation: 5,
+  },
+  headerTitle: {
+    fontSize: 28,
+    fontWeight: 'bold',
+    color: '#FFFFFF',
+    marginBottom: 8,
+  },
+  headerSubtitle: {
+    fontSize: 16,
+    color: 'rgba(255, 255, 255, 0.8)',
+  },
+  content: {
+    padding: 20,
+    gap: 15,
+  },
+  card: {
+    borderRadius: 16,
+    padding: 20,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.05,
+    shadowRadius: 8,
+    elevation: 2,
+  },
+  switchRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+  cardTitle: {
+    fontSize: 20,
+    fontWeight: '600',
+    marginBottom: 15,
+    borderLeftWidth: 4,
+    borderLeftColor: '#007AFF',
+    paddingLeft: 10,
+  },
+  counterContainer: {
+    alignItems: 'center',
+    paddingVertical: 10,
+  },
+  counterText: {
+    fontSize: 48,
+    fontWeight: 'bold',
+    marginBottom: 15,
+  },
+  buttonRow: {
+    flexDirection: 'row',
+    gap: 15,
+  },
+  smallButton: {
+    paddingHorizontal: 20,
+    paddingVertical: 10,
+    borderRadius: 8,
+    minWidth: 80,
+    alignItems: 'center',
+  },
+  smallButtonText: {
+    color: '#FFFFFF',
+    fontWeight: '600',
+  },
+  featureItem: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginBottom: 10,
+  },
+  featureDot: {
+    fontSize: 18,
+    marginRight: 10,
+  },
+  featureText: {
+    fontSize: 16,
+    lineHeight: 24,
+  },
+  button: {
+    borderRadius: 12,
+    paddingVertical: 15,
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginTop: 10,
+  },
+  buttonText: {
+    color: '#FFFFFF',
+    fontSize: 18,
+    fontWeight: '600',
+  },
+  footer: {
+    marginTop: 30,
+    marginBottom: 20,
+    alignItems: 'center',
+  },
+  footerText: {
+    fontSize: 14,
+    lineHeight: 20,
+  },
+});