Coder Social home page Coder Social logo

coderiver-react-native's Introduction

Coderiver

操作前请先阅读README

任务清单地址

开发任务请在清单里认领。

清单地址

设计稿地址(蓝湖)

设计稿地址

api mock 地址(easy-mock)

https://www.easy-mock.com/project/5c2d7e63873e4126e1daa237

产品原型

原型地址

技术选型

  • 脚手架:react-native-cli
  • UI 框架:teaset
  • 状态管理:mobx
  • 规范:eslint

项目目录

├── api           // 网络请求相关
├── assets        // 资源相关
├── components    // 组件
├── config        // 通用配置项
├── container     // 容器组件
│   └── index.js  // navigator组件
├── dao           // 存储操作相关
├── store         // 状态操作相关
├── style         // 样式
└── utils         // 工具相关

项目分层

本项目使用代码分层如上表目录,再次详细说明下,

  • api 目录为后台接口目录,像里面传递请求参数,向外部提供 Promise 对象
export const example = param => {
  return fetch ('/api/example', {
    method: 'post',
    body: JSON.stringify(param)
  })
}
  • assets 目录提供静态资源,字体 图片等

  • components 目录提供通用组件

  • config 目录提供全局配置变量等

  • container 目录提供容器组件

  • dao 目录提供存储相关逻辑 // asyncStorage

  • store 目录提供业务逻辑 // 接口数据处理,用户操作等

  • style 目录提供通用样式

  • utils 目录提供通用工具函数

项目启动

  git clone xxx
  cd coderiver-react-native
  git checkout develop
  yarn
  react-native run-ios
  # or react-native run-android

开发新功能

 git checkout -b feature/新功能 dev
 Coding...
 git add .
 git commit -m xxx
 git pull --rebase origin dev
 git push origin feature/新功能
 在github上面发起merge请求。

发现/修复bug

开发过程,发现bug。在 Issues 上面描述出来,并打上 bug 标签。

描述模版如下:

bug 标题:

bug 描述:

bug 截图:

期望效果:

bug 修复遵循相关性原则,即谁接手的功能,谁修复相关 bug。

bug 修复流程

  git checkout -b bugfix/bug 标题
  Coding...
  git add .
  git commit -m bug 标题
  git pull --rebase origin dev
  git push origin bugfix/bug 标题
  在github上面发起 merge 请求。
  请求受理后,即可关掉 bug Issues

API 命名规范

  • 网络请求前缀 fetch ,// 命名可参考后台 API 命名

  • 用户操作前缀 handle

  • 表单提交前缀 submit

  • 判读变量前缀 is

  • 数组变量后缀 List 负数命名

  • 数组迭代变量 item

  • ID 相关变量,ID 字母全部大写

开发规范

  • 组件以文件夹形式展现。使用 index.js 作为组件入口,引用文件夹路径即可使用组件。

  • 组件文件夹使用大驼峰命名,其他文件夹使用中划线命名

  • style 对象始终放在最后声明。如果 style 太长,则应在同文件夹创建 style.js 文件。

  • 项目采用分层架构,具体分层在上面的文件目录,在对应层写对应函数,避免写超出相应职责的函数。

  • 提交 commit 避免无意义提交,避免提交无意义的修改。

  • 提交代码之前先 pull,保证最新,pull 时加上 --rebase 参数

  • pr 遵循最小原则,一次只提交一个功能点,有利于保证代码质量。

  • 每个功能点 commit 一次,若多次修改,请合并成一个commit。

尾巴

大家相识一场时缘分,能与大佬一起共事更是我的幸运,希望大家可以在这个开源项目中,互相学习,共同成长。我也会以开源的代码质量要求自己。请大家多多加油。

coderiver-react-native's People

Contributors

hamsterbiscuit avatar trustdec avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar

coderiver-react-native's Issues

邮箱/手机号登陆

  1. 邮箱或手机号登录在一个页面,设计图需要调整。

  2. 输入用户名密码后,点击白色右箭头按钮,先本地检测邮箱/手机号格式是否正确,再检测密码格式是否正确,检测通过后再调用登录API,登录成功跳转到主页。

(验证失败的提示及设计图稍后补)

  1. 密码校验规则:6-18位(不能全是数字或字母)

第三方账号授权登录

第三方账号授权登录

  • 支持 GitHub、微信、新浪微博授权登录

  • 第一次授权登录成功后,跳转到选择角色和工作经验页面,选择完后进入主页

选择角色页面

  1. 还原设计图

  2. 角色默认选中列表的第一个选项

  3. 点击角色,在页面下方弹出滚轮选择器。

  4. 点击白色右箭头按钮,进入下一步

选择工作经验页面

  1. 还原设计图

  2. 工作经验默认选中列表的第一个选项

  3. 点击工作经验,在页面下方弹出滚轮选择器。

  4. 点击白色右箭头按钮,进入个人中心页面

填写邮箱/手机号页面

  1. 还原设计图(目前设计图把邮箱注册和手机号注册分开了,经讨论决定放到一个页面中。标题为:您的邮箱或手机号?提示语为输入邮箱/手机号。后期设计图会更新)

  2. 点击白色箭头按钮时,先检测邮箱/手机号格式是否正确,格式正确则调用API检测邮箱/手机号是否可用,格式不正确则按钮抖动并显示提示信息。API验证同理,验证可用进入下一步,不可用按钮抖动并显示提示信息。

(错误提示的设计图暂无,稍后会补上)

欢迎页

Story

应用启动用户看到的欢迎页

  • 还原UI图,效果参照设计稿(Mobile)-欢迎页

  • 展示欢迎页期间加载应用资源,定时3秒后跳转到主页

填写密码页面

  1. 还原设计图

  2. 密码格式:6-18位(不能全是数字或字母)

  3. 检测到输入变化,延时300ms验证密码格式是否正确。

  4. 验证两次输入密码是否一致。

  5. 密码默认不明文显示,点击输入框上面的“显示”按钮时,明文显示密码,此时文字“显示”变为“隐藏”。点击“隐藏”按钮时,密码用点表示。

  6. 点击白色箭头按钮,如前面验证通过则进入下一步,验证不通过则按钮抖动并显示提示信息

  7. 错误提示设计图稍后补上。

填写昵称页面

  1. 还原设计图

  2. 输入昵称时,每检测到输入框字符串变化,延时 300ms 调用名字查重接口查询名字是否可用。可用则显示验证成功状态(见设计图),不可用则显示验证失败状态(缺少验证失败设计图,后期会补)

  3. 点击白色右箭头按钮,进入下一步。当验证失败时按钮仍可点击,但按钮会有抖动效果,提示用户修改昵称直至验证通过。验证通过之前不会进入下一步,通过之后进入下一个页面。

首页注册登录

  • 按照设计图完成注册页面和流程
  • 注册采用渐进的方式,一步步引导用户填写信息

(设计图后期可能稍有改动,以具体Task描述为准)

  • [填写昵称页面 #10

  • 填写邮箱/手机号页面 #11

  • 填写密码页面 #12

  • 选择角色页面 #13

  • 选择工作经验页面 #14

  • 注册完进入个人中心页面 #15

首页页面

  • tab栏搭建

  • tab 栏 创建 效果菜单

  • 页面搭建

  • 页面布局展示卡片,header上面的 用户名以及 头像的展示

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.