Skip to content
The App for Tianjin University. Now in React-Native.
TypeScript JavaScript Other
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

WePeiyang 4.0


There was a gravity - almost a sense of civic responsibility, to care way beyond any sort of functional imperative.

— Jony Ives


About 关于

The concept of WePeiyang 4.0 was brought by designer Owlling. Later in July 2019, the development of WePeiyang 4.0 was initiated.

微北洋 4.0 的概念提出自设计师 Owlling。随后的 2019 年 7 月,开发工作正式启动。

At that time, the previous major version of WePeiyang, functionally mature and time-proven, does not require an immediate update itself. However, our studio did face problems like unbalanced iOS/Android productivity, inconsistency across platforms, and a mediocre UX. The current version therefore primarily focuses on better structure designs, enhanced user experience and bold experiments on new features.



Runtime Screenshots / 运行时图片

Status 状态

Most major modules are developed.


New Features to Expect 功能性改进

Global Features
Feature 特性 Status
Custom layout order on homepage 主页自定义模块布局顺序
I18n & multilingual support 多语言支持
Data persistent storage & conditional update 数据持久性存储与选择性更新
Scroll down to update 下拉刷新
Global custom identity font 全局自定义品牌字体
Latitude of custom theming 更加完善的主题定制系统
Proper spacing between latin letters & ideograph characters 中西文混排时自动添加空格间距
Guest login 体验版账号登入


Theming in GPA Module / 对 GPA 模块对主题自定义

Feature 特性 Status
GPA Rose Chart GPA 玫瑰图
GPA order by course name GPA 按照课程名称排序
Toggle your curves 切换绩点 / 学分 / 加权曲线
Kachi Index 卡绩指数
What If 增加或删除自定义科目后计算结果
Feature 特性 Status
Spending trend chart in 180 days 180 日消费趋势图
Feature 特性 Status
Renew specific books 指定书籍续借 ⚠ (API Malfunction)
Feature 特性 Status
Cancel & delay courses 取消课程或调课
Responsive course table layout 响应式课表布局
Custom course scheduling & events 自定义课程 / 事件
Support of scheduling conflicts 冲突课程显示


Responsive course table layout / 响应式课表布局

Feature 特性 Status
Search algorithm based on FlexSearch.js 基于 FlexSearch 的关键词检索算法
Type-as-you-search 搜索结果即时展现

Guidelines on UX Design 体验性改进

  • Pixel-perfect UI implementation / 像素级精确的设计图还原
  • Use transitions & animations / 使用过渡与动画
  • Lazy loading on costly charts / 低性能图表的延迟加载
  • Settings instantly take effect / 避免设置项变更后重启应用
  • Every Touchable needs visual feedback / 每一个可触摸元素都需要视觉反馈
  • Loading indicators on async actions / 加载时的 Loading 动画指示
  • Consistent layout across platforms / 平台无关的一致布局
  • ......

Supported Languages 已支持语言


Language (Native) Language Status
English English Supported
简体中文 Chinese Supported
عربى Arabic Partial translation
Espanol Spanish Partial translation
日本語 Japanese Partial translation
ไทย Thai Partial translation

More is coming, help is welcome.



Start Building 开始构建


npm install -g react-native-cli
npm install
react-native link
react-native run-android

iOS (Build on MacOS)

npm install -g react-native-cli
npm install
react-native link
cd ios && pod install
cd ..
react-native run-ios

Note that to run the above commands, you need to ensure several prerequisites in your building environment. Please refer to React Native: Getting Started for the most up-to-date building indications. React-Native CLI is used here.

请注意,为了使上述命令顺利运行,你的构建环境需要满足一些前提条件。请参考 React Native: 开始构建 以获取最新版本的构建要求和步骤。本项目使用的是 React Native CLI 而非 Expo CLI。


Project Structure 项目架构

WePeiyang-RN is initiated with react-native-cli along with a few customized modifications.

微北洋 RN 使用 react-native-cli 初始化,并对原始文件结构应用了少许变更。

├── android
├── ios
├── app
│   ├── i18n
│   ├── store.ts
│   ├── actions
│   ├── reducers
│   ├── components
│   ├── navigation
│   ├── screens
│   ├── services
│   ├── theme
│   ├── utils
│   ├── app.tsx
│   ├── environment-variables.ts
├── __test__
├── index.js
└── package.json


Files related to i18n and multilingual support, such as translation logics and string resources, live here.


Store.ts, Actions & Reducers

Files related to Redux structure live here. For information about store, actions & reducers in Redux, please refer to Redux official docs.

这些文件夹和文件与 Redux 有关。了解它们的具体用途,请参见 Redux 官方文档或 Flux 设计架构说明。


This is where the global components live. It includes several HOC over native components as well as normal presentational components. Note that when a component is designed to use in one particular module, put that in the corresponding module folder in /screens instead.

此处放置所有的全局组件。它包含了文本、按钮、输入框等原生 React-Native 组件的 HOC,也包括了一些全局的展示型组件。注意,当一个组件在设计上仅可能被某一个模块使用时,应该放置在对应的模块 Screens 的文件夹中。


This is where the navigators live. Navigators define the navigation structure of the app.

此处定义了用于定义应用页面之间导航结构的 Navigators。


This is where the related services live. Currently it contains TWTFetch, the network request service under the TWT Open API request standard.

此文件夹包含了应用内的服务模块。目前,它主要提供基于 TWT Open 接口请求标准的网络请求服务。


This is where the screens live. A screen defines a page of the app, and usually contains several components. Screens of the same module should be placed under the same subdirectory. Local components, resources and other module-specific files can be found here, too.

此处定义了应用内的各个屏幕。通常,一个屏幕由许多组件组成。属于同一模块的 Screen 应该归至相同的文件夹中,该文件夹内也可能包含局部的组件、资源和其他文件。


Files in this folder define all parameters and methods related to visual identity & styling.

此处定义了所有和应用视觉样式有关的参数,如颜色、字体与 Spacing 等。


Files in this folder define some tool functions or variables, or files that could not be categorized into other directories.



Elsewhere 别处


License 协议

A license would be published after the first release. Before that happens, issues are pull requests are welcomed.



TWT STUDIO × Tzingtao Chow

You can’t perform that action at this time.