Troila Mobile Ui of React-Native

troila-mobile-ui 是 Troila Mobile Ui 的移动规范的 React Native 实现，服务于天津卓朗科技移动端业务。

特性和优势

UI 样式高度可配置，拓展性更强，轻松适应各类产品风格
基于 React Native 的 iOS / Android / Web todo 多平台支持，组件丰富、能全面覆盖各类场景
提供 "组件按需加载" 等优化方案，一体式开发
使用 TypeScript 开发，提供类型定义文件，支持类型及属性智能提示，方便业务开发
全面兼容 react

适用场景

适合于中大型产品应用
适合于基于 react / react-native 的多终端应用
适合不同 UI 风格的高度定制需求的应用

快速上手

在开始之前，推荐先学习 React 和 ES2015。我们使用了 babel，试试用 ES2015 的写法来提升编码的愉悦感。

确认 Node.js 已经升级到 v4.x 或以上。

1. 创建一个项目

可以是已有项目，或者是使用 create-react-native-app 新创建的空项目，你也可以从这里拷贝并修改

参考更多官方示例集或者你可以利用 React 生态圈中的各种脚手架

完整步骤请查看此处文档： antd-mobile-sample/create-react-native-app

2. 安装

$ npm install troila-mobile-ui --save

3. 使用

组件使用实例：

import React, { Component } from 'react';
import { AppRegistry } from 'react-native';
import Text from 'troila-mobile-ui/text';

class HelloWorldApp extends Component {
  render() {
    return <Text>Start</Text>;
  }
}

AppRegistry.registerComponent('HelloWorldApp', () => HelloWorldApp);

按需加载

下面两种方式都可以只加载用到的组件，选择其中一种方式即可。

使用 babel-plugin-import（推荐）。

// .babelrc or babel-loader option
{
  "plugins": [
    ["import", { libraryName: "troila-mobile-ui" }]
  ]
}

然后改变从 antd-mobile-rn 引入模块方式即可。

import { Text } from 'troila-mobile-ui';

手动引入

import Text from 'troila-mobile-ui/text';

版本

稳定版：

链接

如何贡献

有任何建议或意见您可以 Pull Request，给我们报告 Bug。

强烈推荐阅读《提问的智慧》、《如何向开源社区提问题》和《如何有效地报告 Bug》，更好的问题更容易获得帮助。

社区互助

如果您在使用的过程中碰到问题，可以通过下面几个途径寻求帮助，同时我们也鼓励资深用户通过下面的途径给新人提供帮助。

通过 Stack Overflow 或者 Segment Fault 提问时，建议加上 troila-mobile-ui 标签。

Stack Overflow（推荐）
Segment Fault