# react-native-starter-kit

**Repository Path**: hzerica/react-native-starter-kit

## Basic Information

- **Project Name**: react-native-starter-kit
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 4
- **Forks**: 2
- **Created**: 2016-07-18
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 示范工程

## 页面

* 在pages下放置页面组件. 如果页面数量较多,可以在pages下组织子文件夹,参考`页面子路由`

* 每个页面使用routerDecorator来定义自己的path(通常不应/开头)

* 在src/pages/index.js里import并加入对应的组件.

## 子路由

* 如多个页面具有较强关联性,可组织成子路由

* 在上级路由(如`src/pages`)中建立子文件夹,如user

* 在子文件夹下建立index.js, 内容如下:

```javascript
import Login from './Login';

export const routeConfig = {
  path: 'user',
  childRoutes: [
    Login,
  ].map(v => v.routeConfig || ),
};
```

* 建立对应的Login组件,并通过routerDecorator指定地址,譬如`@router('login')`

* 在其上一层路由,譬如`src/pages/index`中,导入并使用该路由

```
/**
 * Created by tdzl2003 on 6/28/16.
 */

import Splash from './Splash';
import Home from './Home';
import * as User from './user';     // 添加这一行,引入子路由

export const routeConfig = {
  path: '/',
  childRoutes: [
    Splash,
    Home,
    User,       // 添加这一行,使用子路由
  ].map(v => v.routeConfig || v),
};

```

* 最后访问login页面时,地址是包含了每一级路由的,如`location: '/user/login'`.

## 逻辑模块

* 较复杂的大量业务,应封装为逻辑模块. starter-kit已经包含了一个逻辑模块rpc

* 逻辑模块可以import另一个逻辑模块, 但应避免循环引用.当出现循环引用时,合并两个模块,或者改变模块的额划分

* 逻辑模块可以通过export default导出一个EventEmitter,其余内容均通过export导出

* 可以在模块内部用类似以下方式,定义局部的emit函数供模块内部使用,但不应导出:
 
```javascript
const RPC = new EventEmitter();
const emit = RPC.emit.bind(RPC);        // 可以在本模块后续代码中调用emit('事件名', 参数)
export default RPC;
```

* 导出函数可以是普通函数(直接存取内存数据)或异步函数(涉及IO或网络请求等)

* 如果有两个路由上不相干的组件需要监听相同的数据或互相通知,应建立逻辑模块,通过事件通知来通知页面刷新

## 事件订阅

* 组件可以订阅一个或多个事件.

* 在render中使用Subscribe组件来订阅事件,如下:

```javascript
render(){
  return (
    <View>
      <Subscribe target={RPC} eventName={invalidToken} listener={this.onInvalidToken} />
    </View>
  );
}
```

* Subscribe本身不会渲染出任何内容

* 当事件触发时,listener会被调用. 通常这时可以触发一个setState操作. 有时候也会触发navigator等操作

* 当target或eventName变化时,旧的事件会被自动注销,新事件会被注册.

* 如果render只返回一个不能包含children的组件,可以这样订阅事件:

```javascript
render() {
  // 最终渲染出来的其实只有TextInput
  return (
    <Subscribe target={RPC} eventName={invalidToken} listener={this.onInvalidToken}>
      <TextInput {...this.props} />
    </Subscribe
  );
}
```

## 表单

* import { Form, 其它组件} from '../components/form/react-native'; 注意要从react-native中import才能导入RN所用的组件

* 使用<Form>来表达一个表单,为其定义`onSubmit`回调,其参数是要提交的整个表单的值

* 可以直接或在任何子组件中渲染FormInput,指定其name, 其值会在内容修改的时候自动写进form

* 可以给FormInput指定validate属性,其为一个正则表达式,或在一个检测失败时抛出错误的函数

* 可以用<Submit/>包裹需要提交的Touchable或者其它组件,该组件的disabled会根据整个表单的validate状态变化. 该组件的onPress回调会用于提交整个表单.

* 提交失败时,onSubmit可以抛出错误

* 不论错误原因为何,当onSubmit抛出错误时,Form的onSubmitFailed回调会被调用,这可以用于提示用户提交失败的原因

* 示例:

```javascript
  // TextField 是一个包装了FormInput的组件
  render() {
    return (
      <Form onSubmit={this.submit} onSubmitFail={this.onSubmitFail}>
        <InputScrollView style={styles.container} contentContainerStyle={styles.content}>
          <Image resizeMode='contain' style={styles.logo} source={require('../img/LOGO.png')}/>
          <TextField
            icon={require('../img/phone.png')}
            name="phone"
            validate={/^\d{11}$/}
            placeholder="手机号"
            keyboardType="numeric"
            returnKeyType="next"
            />
          <TextField
            icon={require('../img/password.png')}
            name="passWord"
            validate={/^.+$/}
            placeholder="输入8-16位数字或字母"
            returnKeyType="done"
            secureTextEntry
          />
          <Submit>
            <Button label="登录" />
          </Submit>
          <View style={styles.links}>
            <LinkText label="忘记密码?" route={{location: '/forget', background: true}}/>
            <LinkSeperator />
            <LinkText label="立即注册" route={{location: '/register', background: true}}/>
          </View>
        </InputScrollView>
      </Form>
    )
  }
```

## 样式-主题

* 不再推荐使用任何的全局样式

* 一个样式如果在多个页面中被使用(如按钮,表单输入框等),应考虑封装成组件,在组件内部包含对应的样式,以避免样式重复定义

* 所有重复定义的样式都应当至少被思考一遍,是否要抽象成组件.

* 较小的组件不再强制配套`.style.js`文件,如果总行数小于200行,可以考虑直接做为一个文件.如果文件过长,还是考虑将样式放入配套的`.style.js`文件

* 组件所使用的图片资源,不再建议放到全局的imgs或assets目录,反而建议和组件或页面放在一起

## 对话框

* 使用Navigator来实现对话框

* 使用configScene来处理对话框弹出/消失时的动画 和滑动取消的手势

## 代码规范

遵循airbnb规范,可以运行npm test测试规范,也可在webstorm中开启eslint功能.

### 例外

* 可以使用console/alert

* 可以使用__DEV__, __SERVER__, __CLIENT__, __WEB__等全局变量用于判断当前运行环境