PureScript React Native 项目教程
1. 项目目录结构及介绍
purescript-reactnative/
├── src/
│ ├── Main.purs
│ ├── ReactNative/
│ │ ├── API.purs
│ │ ├── Components/
│ │ │ ├── Text.purs
│ │ └── Unsafe/
│ │ └── Components.js
├── bower.json
├── package.json
├── README.md
└── index.js
目录结构介绍
- src/: 包含 PureScript 源代码的主要目录。
- Main.purs: 项目的入口文件,定义了应用的初始化和启动逻辑。
- ReactNative/: 包含与 React Native 相关的模块和组件。
- API.purs: 定义了与 React Native API 交互的函数。
- Components/: 包含 React Native 组件的 PureScript 绑定。
- Text.purs: 定义了
Text
组件的 PureScript 绑定。
- Text.purs: 定义了
- Unsafe/: 包含不安全的 JavaScript 组件绑定,用于处理尚未完全支持的 React Native 组件。
- bower.json: 定义了项目的 Bower 依赖。
- package.json: 定义了项目的 npm 依赖和脚本。
- README.md: 项目的说明文档。
- index.js: 项目的 JavaScript 入口文件,通常用于启动 React Native 应用。
2. 项目启动文件介绍
src/Main.purs
module Main where
import Prelude
import Effect (Effect)
import React (ReactClass, statelessComponent)
import ReactNative.API (registerComponent)
import ReactNative.Components.Text (text_)
app :: forall p. ReactClass [|p]
app = statelessComponent render
where
render _ = text_ "Hello World"
main :: Effect Unit
main = do
registerComponent "HelloWorld" app
启动文件介绍
Main.purs
: 这是项目的入口文件,定义了应用的初始化和启动逻辑。app
: 定义了一个无状态的 React 组件,渲染了一个简单的 "Hello World" 文本。main
: 使用registerComponent
函数将app
组件注册为 "HelloWorld",并启动应用。
3. 项目配置文件介绍
bower.json
{
"name": "purescript-reactnative",
"version": "0.1.0",
"license": "MIT",
"dependencies": {
"purescript-react": "^5.0.0",
"purescript-reactnative": "^0.1.0"
}
}
package.json
{
"name": "purescript-reactnative",
"version": "0.1.0",
"license": "MIT",
"scripts": {
"build": "pulp build --to index.js",
"start": "react-native run-android"
},
"dependencies": {
"react": "^16.8.6",
"react-native": "^0.59.9"
}
}
配置文件介绍
bower.json
: 定义了项目的 Bower 依赖,包括purescript-react
和purescript-reactnative
。package.json
: 定义了项目的 npm 依赖和脚本。dependencies
: 包含了 React 和 React Native 的依赖。scripts
: 定义了构建和启动应用的脚本。build
: 使用pulp
构建项目,并将输出文件保存为index.js
。start
: 启动 React Native 应用,默认运行在 Android 模拟器或设备上。
通过以上配置,您可以轻松地构建和启动一个基于 PureScript 的 React Native 应用。