PureScript React Native 项目教程

PureScript React Native 项目教程

purescript-reactnativeReact Native bindings for purescript项目地址:https://gitcode.com/gh_mirrors/pu/purescript-reactnative

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 绑定。
    • 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 应用。

purescript-reactnativeReact Native bindings for purescript项目地址:https://gitcode.com/gh_mirrors/pu/purescript-reactnative