测试文件读写

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "cSpell.words": ["RNFS"]
+}

app/(tabs)/index.tsx

@@ -5,6 +5,7 @@ import ParallaxScrollView from '@/components/ParallaxScrollView';
 import { ThemedText } from '@/components/ThemedText';
 import { ThemedView } from '@/components/ThemedView';
 import { Button } from 'react-native-paper';
+import FileReadWriteExample from '@/components/ui/FileReadWriteExample';
 
 export default function HomeScreen() {
   return (
@@ -23,6 +24,7 @@ export default function HomeScreen() {
       <Button icon="camera" mode="contained" onPress={() => console.log('Pressed')}>
         Press me
       </Button>
+      <FileReadWriteExample />
       <ThemedView style={styles.stepContainer}>
         <ThemedText type="subtitle">Step 1: Try it</ThemedText>
         <ThemedText>

components/ui/FileReadWriteExample.tsx

@@ -0,0 +1,51 @@
+import React, { useEffect } from 'react';
+import { View, Text, Button } from 'react-native';
+import RNFS from 'react-native-fs';
+
+const FileReadWriteExample = () => {
+  // 定义文件路径
+  const filePath = RNFS.DocumentDirectoryPath + '/example.txt';
+
+  // 写入文件的函数
+  const writeToFile = async () => {
+    try {
+      const content = 'Hello, this is a test file content.';
+      // 使用 RNFS.writeFile 方法写入文件
+      await RNFS.writeFile(filePath, content, 'utf8');
+      console.log('File written successfully');
+    } catch (error) {
+      console.error('Error writing file:', error);
+    }
+  };
+
+  // 读取文件的函数
+  const readFromFile = async () => {
+    try {
+      // 使用 RNFS.readFile 方法读取文件
+      const contents = await RNFS.readFile(filePath, 'utf8');
+      console.log('File content:', contents);
+    } catch (error) {
+      console.error('Error reading file:', error);
+    }
+  };
+
+  useEffect(() => {
+    // 在组件挂载时创建文件目录
+    RNFS.mkdir(RNFS.DocumentDirectoryPath)
+      .then(() => {
+        console.log('Directory created successfully');
+      })
+      .catch((error) => {
+        console.error('Error creating directory:', error);
+      });
+  }, []);
+
+  return (
+    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
+      <Button title="Write to File" onPress={writeToFile} />
+      <Button title="Read from File" onPress={readFromFile} />
+    </View>
+  );
+};
+
+export default FileReadWriteExample;

package-lock.json

@@ -27,6 +27,7 @@
         "react": "18.3.1",
         "react-dom": "18.3.1",
         "react-native": "0.76.7",
+        "react-native-fs": "^2.20.0",
         "react-native-gesture-handler": "~2.20.2",
         "react-native-paper": "^5.13.1",
         "react-native-reanimated": "~3.16.1",
@@ -5055,6 +5056,11 @@
       "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
       "license": "MIT"
     },
+    "node_modules/base-64": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmmirror.com/base-64/-/base-64-0.1.0.tgz",
+      "integrity": "sha512-Y5gU45svrR5tI2Vt/X9GPd3L0HNIKzGu202EjxrXMpuc2V2CiKgemAbUUsqYmZJvPtCXoUKjNZwBJzsNScUbXA=="
+    },
     "node_modules/base64-js": {
       "version": "1.5.1",
       "resolved": "https://registry.npmmirror.com/base64-js/-/base64-js-1.5.1.tgz",
@@ -11825,6 +11831,25 @@
         }
       }
     },
+    "node_modules/react-native-fs": {
+      "version": "2.20.0",
+      "resolved": "https://registry.npmmirror.com/react-native-fs/-/react-native-fs-2.20.0.tgz",
+      "integrity": "sha512-VkTBzs7fIDUiy/XajOSNk0XazFE9l+QlMAce7lGuebZcag5CnjszB+u4BdqzwaQOdcYb5wsJIsqq4kxInIRpJQ==",
+      "license": "MIT",
+      "dependencies": {
+        "base-64": "^0.1.0",
+        "utf8": "^3.0.0"
+      },
+      "peerDependencies": {
+        "react-native": "*",
+        "react-native-windows": "*"
+      },
+      "peerDependenciesMeta": {
+        "react-native-windows": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/react-native-gesture-handler": {
       "version": "2.20.2",
       "resolved": "https://registry.npmmirror.com/react-native-gesture-handler/-/react-native-gesture-handler-2.20.2.tgz",
@@ -14076,6 +14101,12 @@
         "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
       }
     },
+    "node_modules/utf8": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmmirror.com/utf8/-/utf8-3.0.0.tgz",
+      "integrity": "sha512-E8VjFIQ/TyQgp+TZfS6l8yp/xWppSAHzidGiRrqe4bK4XP9pTRyKFgGJpO3SN7zdX4DeomTrwaseCHovfpFcqQ==",
+      "license": "MIT"
+    },
     "node_modules/utils-merge": {
       "version": "1.0.1",
       "resolved": "https://registry.npmmirror.com/utils-merge/-/utils-merge-1.0.1.tgz",

package.json

@@ -34,6 +34,7 @@
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "react-native": "0.76.7",
+    "react-native-fs": "^2.20.0",
     "react-native-gesture-handler": "~2.20.2",
     "react-native-paper": "^5.13.1",
     "react-native-reanimated": "~3.16.1",