ReScript React Native 项目教程

ReScript React Native 项目教程

rescript-react-native ReScript bindings for React Native 项目地址: https://gitcode.com/gh_mirrors/re/rescript-react-native

1. 项目目录结构及介绍

ReScript React Native 项目的目录结构如下：

rescript-react-native/
├── .github/
├── src/
│   ├── components/
│   ├── screens/
│   ├── utils/
│   └── App.res
├── .gitignore
├── .rescriptsrc.js
├── package.json
├── README.md
└── yarn.lock

目录结构介绍

• .github/: 包含 GitHub 相关的配置文件，如 GitHub Actions 的工作流配置。
• src/: 项目的源代码目录，包含所有 ReScript 代码。
  • components/: 存放 React Native 组件的目录。
  • screens/: 存放应用的不同屏幕组件的目录。
  • utils/: 存放工具函数和辅助代码的目录。
  • App.res: 项目的入口文件，定义了应用的主要结构和路由。
• .gitignore: 指定 Git 版本控制系统忽略的文件和目录。
• .rescriptsrc.js: ReScript 的配置文件，用于自定义编译选项。
• package.json: 项目的依赖管理文件，定义了项目的依赖包和脚本。
• README.md: 项目的说明文档，通常包含项目的介绍、安装和使用说明。
• yarn.lock: 锁定依赖包版本的文件，确保项目在不同环境中的一致性。

2. 项目启动文件介绍

项目的启动文件是 src/App.res，它是 ReScript React Native 应用的入口点。以下是 App.res 文件的简要介绍：

module App = {
  @react.component
  let make = () => {
    <View>
      <Text> {React.string("Hello, ReScript React Native!")} </Text>
    </View>
  }
}

@react.app
let app = () => <App />

启动文件介绍

• App 模块: 定义了一个名为 App 的 React 组件，该组件渲染了一个包含文本 "Hello, ReScript React Native!" 的视图。
• @react.app: 这是一个装饰器，用于将 App 组件标记为应用的根组件。

3. 项目配置文件介绍

.rescriptsrc.js

.rescriptsrc.js 是 ReScript 的配置文件，用于自定义编译选项。以下是一个简单的配置示例：

module.exports = {
  "bs-dependencies": ["@rescript/react", "rescript-react-native"],
  "reason": { "react-jsx": 3 }
}

配置文件介绍

• bs-dependencies: 定义了项目依赖的 ReScript 包，如 @rescript/react 和 rescript-react-native。
• reason: 配置 ReasonML 的编译选项，如启用 React JSX 3 语法。

package.json

package.json 是 Node.js 项目的配置文件，定义了项目的依赖包和脚本。以下是一个简单的配置示例：

{
  "name": "rescript-react-native-app",
  "version": "1.0.0",
  "scripts": {
    "start": "rescript build -w",
    "clean": "rescript clean"
  },
  "dependencies": {
    "@rescript/react": "^0.10.0",
    "rescript-react-native": "^0.63.3"
  }
}

配置文件介绍

• name: 项目的名称。
• version: 项目的版本号。
• scripts: 定义了项目的脚本，如 start 用于启动开发服务器，clean 用于清理编译输出。
• dependencies: 定义了项目的依赖包，如 @rescript/react 和 rescript-react-native。

通过以上配置，你可以轻松地启动和配置 ReScript React Native 项目。

rescript-react-native ReScript bindings for React Native 项目地址: https://gitcode.com/gh_mirrors/re/rescript-react-native