React Native开发系列笔记2(快速上手)

hxy    2021-01-06 08:31

接上篇:https://www.neusncp.com/user/blog?id=643

React Native 版本更新很快,在网上找了好多例子,做着做着就迷路(一堆诡异的bug,很头大)了
去github找一个最新的demo,看看已有的架构都是什么样的,才好熟悉react native开发框架。
有一个仿照微信做的客户端,如果已安装git,执行如下命令:
git clone https://gitee.com/icfyl/ReactNative-Weixin.git
cd ReactNative-Weixin
yarn install
react-native run-android
没安装的,手动去https://gitee.com/icfyl/ReactNative-Weixin.git下载然后解压。
运行命令: react-native run-android
看控制台报错了,提示缺少SDK,打开Android Studio,安装SDK 27.0.3 版本。
然后重启项目,提示:return new RegExp SyntaxError: Invalid regular expression:

进入项目目录下的:node_modules\metro-config\src\defaults 目录,编辑 blacklist.js

把 /node_modules[/\\]react[/\\]dist[/\\].*/ 修改为 /node_modules[\/\\]react[\/\\]dist[\/\\].*/


再次启动,手机有画面了。
修改后的登录页面,画面略有差异
 
登录是不可能登录的了,缺少后台服务器端,执行一下命令:
git clone https://gitee.com/icfyl/ChatServe.git
cd ChatServe
npm install
安装好依赖之后,运行 node index.js
提示缺少 MongoDB,安装一下:https://www.mongodb.com/try/download/community
安装MongoDB
完成后再启动 (react-native run-android),提示:
Error: Redis connection to 127.0.0.1:6379 failed - connect ECONNREFUSED 127.0.0.
1:6379
    at Object.exports._errnoException (util.js:1016:11)
    at exports._exceptionWithHostPort (util.js:1039:20)
    at TCPConnectWrap.afterConnect [as oncomplete] (net.js:1138:14)

原因是缺少 Redis server或者未启动:我确定我没安装,传送门:https://github.com/MicrosoftArchive/redis/releases
下载后安装。
注:

Redis 是一个开源(BSD许可)的,内存中的数据结构存储系统,它可以用作数据库、缓存和消息中间件。 它支持多种类型的数据结构,如 字符串(strings), 散列(hashes), 列表(lists), 集合(sets), 有序集合(sorted sets) 与范围查询, bitmaps, hyperloglogs 和 地理空间(geospatial) 索引半径查询。 Redis 内置了 复制(replication),LUA脚本(Lua scripting), LRU驱动事件(LRU eviction),事务(transactions) 和不同级别的 磁盘持久化(persistence), 并通过 Redis哨兵(Sentinel)和自动 分区(Cluster)提供高可用性(high availability)。

现在基本不报错了,注册个账号,提示异常,看看代码,Express的,要学的东西真多

总是提示注册异常,看来是防火墙问题,在手机的浏览器上访问PC机上的服务器地址,发现访问不通,嗯,估计是学校的防火墙问题。

都切换到内网,保证在同一个网段,手机端项目/App/Config/index.js内容修改如下:
import { Platform } from "react-native";

const config = {
  baseURL:
    Platform.OS === "ios"
      ? "http://localhost:9099"
      : "http://neusncp.com:9099",
};

export default config;
注意苹果端的地址可以暂时不用管,安卓端的切换成服务器端的IP,并设置服务器所在的PC机防火墙允许 9099 端口入站。
允许9099端口被外网访问

再次测试,终于可以注册登录了。登录之后显示了一个红色页面,提示:console.error :'data' is required in save()
暂未解决。
登录成功后进入主界面


注:想要进入调试模式,需要摇晃手机,在PC机的模拟器上可以按 Ctrl + M 打开调试菜单,然后选择 reload 重载,或者直接开启热部署。


 
Last Modified: 2021-01-13 08:48
Views: 2.9K

[[total]] comments

Post your comment
  1. [[item.time]]
    [[item.user.username]] [[item.floor]]Floor
  2. Click to load more...
  3. Post your comment