fish mobile x使用介绍

简介:

fish-mobile-x是基于react native 封装的一套框架，使用jsx编写页面代码，所以在开始之前建议学习一下

• es6
• react
• react native
• fish mobile x

环境搭建

• 安装 node.js 运行环境，建议选择 LTS 版本，最低要求 8.x .
• 安装 yarn，yarn主要用来安装包
• nrm是npm源管理工具,提供 znpm/taonpm/npm 源切换

1.执行:
$ npm install -g @ngweb/nrm --registry http://registry.npm.ztesoft.com/

2.显示当前npm源
$ nrm ls 

* npm -----  https://registry.npmjs.org/
znpm ----  http://registry.npm.ztesoft.com/
taonpm --  https://registry.npm.taobao.org

3.切换到公司源
$ nrm use znpm

Registry has been set to: http://registry.npm.ztesoft.com/

• 安装 fmx-cli 工具

FMX相关的模块都是发布到公司私有npm.ztesoft.com上的,需要先安装nrm进行npm源的切换

1.安装
$ npm install -g @fmx/cli

2.检验安装是否成功
$ fmx --version

快速开发

请参考文档
http://fish-x.ztesoft.io/fish-mobile-x/docs/quickStart.html

调试

在这里主要介绍真机调试

• 安装FMX

在命令行中成功启动项目后，会显示一个二维码，手机端安装FMX之后, 可对改为二维码扫码进行预览、调试、开发。 下载地址：

IOS下载地址

Android下载地址

注：ios安装fmx后，需要在设备->通用->设备管理->ZTEsoft Technology Co.,Ltd ->添加信任

• 启动项目

进入项目根目录下 
1.执行命令，安装包
yarn 

2.等待安装包成功后，启动项目
fmx start

3.启动项目成功后，打开手机上安装的fmx ，扫描二维码

fmx打开项目后，手机 摇一摇 ，可以看到调试菜单（如图），在弹出的菜单中点击 reload 选项进行页面刷新。还可以点击Enable Hot Reloading选择进行页面实时刷新

摇一摇菜单.png

注：请确保手机与电脑处于同一网络段，才能扫描访问的到。 第一次扫码因为要编译js会较慢，之后会较快

• 调试项目
  建议使用 React Native Debugger 工具。 下载地址：

MAC OS

WINDOWS

运行React Native Debugger ，手机“摇一摇”，在弹出的菜单中点击 Debug JS Remotely 开启 JS 调试功能。 即可连接到 React Native Debugger 进行代码的调试。

可以在sources下找到文件，打断点进行调试

React Native Debugger.png

其他学习文档：

• 培训ppt :http://fish.ztesoft.com/share/react-native-fmx/#/
• react native 中文网（更新较慢）：https://reactnative.cn/docs/0.51/getting-started.html
• fish mobile x例子：http://122.192.9.52:19060/#/tmpmarket