# test

**Repository Path**: kuerbb/test

## Basic Information

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

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2018-07-28
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# APP

## 测试号

账号：13500778613
密码：admin123

## cache

写入缓存：WRITE_CACHE(key)
读取缓存：READ_CACHE(key)

Key Table

- sessionId: 凭证
- account：账号
- userInfo： 用户信息

## API 地址

http://39.105.37.134

例如，B 端商户拉去订单的接口调用地址：http://39.105.37.134/mxb/services/order/getPlatformOrders

## 图标地址：

[查看图片](./README_IMAGE.md)

## 技术栈

- [react-native-storage](https://github.com/sunnylqm/react-native-storage/blob/master/README-CHN.md)

  这是一个本地持久存储的封装，可以同时支持 react-native(AsyncStorage)和浏览器(localStorage)。ES6 语法，promise 异步读取，使用 jest 进行了完整的单元测试。

- [react-native-camera](https://github.com/react-native-community/react-native-camera)

  相机、人脸识别、二维码

- [react-native-splash-screen](https://github.com/crazycodeboy/react-native-splash-screen)

  启动屏

- [react-native-linear-gradient](https://github.com/react-native-community/react-native-linear-gradient)

  背景色渐变

- [EventBus](https://github.com/krasimir/EventBus)

  全局事件总线

- [react-native-vector-icons](https://github.com/oblador/react-native-vector-icons)

  [图标地址](https://oblador.github.io/react-native-vector-icons/)

- [react-native-pullview](https://github.com/wuyunqiang/react-native-pullview)

  下拉刷新

- [react-native-image-picker](https://github.com/react-community/react-native-image-picker)

  图片上传

- [react-native-device-info](https://github.com/rebeccahughes/react-native-device-info)

  获取设备信息

## 文件夹说明

- actions

  redux 中的 aciton 文件夹

- api

  与后台交互 api 文件夹

- components

  组件文件夹

- reducers

  redux 中的 reducers 文件夹

- store

  redux 管理

- views

  视图目录

## 基础框架使用

1.  需要使用基础功能的视图， 需要继承 BaseView

```js
import BaseView from './BaseView';

export default class ChangePassword extends BaseView {
  constructor(props) {
    super(props);
    this.state = {
      ...this.BaseState // 继承基础state
      // ... 当前视图所需state
    };
  }

  componentDidMount() {
    super.componentDidMount();
    // 设置头部
    this.props.navigation.setParams({
      title: '修改密码', // 标题
      rightText: '右侧', // 右侧按钮名称
      rightClick: () => {}, // 点击右侧按钮事件
      renderLeftView: () => {}, // 左侧自定义渲染
      renderRightView: () => {}, // 左侧自定义渲染
      backgroundColor: '', // 背景颜色
      textColor: '' // 字体颜色
    });
    // 页面焦点事件
    // const didBlurSubscription = this.props.navigation.addListener('didFocus', (payload) => {
    //   console.debug('didBlur', payload);
    //   // 路由集合
    //   console.log('Page1.Navigation_routers', BaseView.Navigation_routers);
    // });
  }

  // 将原来的渲染 render函数名称更改为 renderPage
  renderPage() {
    // ... 原来render里的内容
  }
}
```



## 组件

- 图标组件

```js
import Icon from 'react-native-vector-icons/FontAwesome';
// FontAwesome 为图标库名称
<Icon name="chevron-left" size={20} color="#fff" />;
```

- HeaderBackButton 头部返回组件

- HeaderRightAddButton 头部新增组件

- PullList 列表组件，支出下拉刷新， 加载更多

  组件使用详见 CardWoucher.js 视图

  ```js
  /**
   * @param {boolean} nomore - 是否还有更多数据， ture：没有更多了，false：还有
   * @param {function} initData - 初始数据定义
   * @param {function} onPullRelease - 下拉刷新调用方法
   * @param {function} renderRow - 渲染列
   * @param {function} renderRow - 渲染列
   * @param {function} onEndReached - 加载更多
   */
  <PullList
    nomore={nomore}
    initData={list => {
      this.pullList = list;
    }}
    onPullRelease={this.onPullRelease}
    renderRow={this.renderRow}
    onEndReached={this.loadMore}
  />
  ```

- DatePicker 日期选择器组件

```js
import DatePicker from '../../components/DatePicker';
<DatePicker
  value={value} // 当前选中时间
  mode="date" // 日期选择的类型, 可以是日期date,时间time,日期+时间datetime,年year,月month
  placeholder="请选择有效日期" // placeholder
  minDate={new Date(2015, 7, 6)} // 最小日期
  maxDate={new Date(2026, 11, 3)} // 最大日期
  onChange={value => {
    this.setState({ validityPeriod: value });
  }}
  format="YYYY-MM-DD" // 格式
/>;
```

- TextInput 文本输入组件

* 图片上传组件

图片组件应用 请参考 视图 CardWoucherForm.js

```js
import DatePicker from '../../components/DatePicker';
<ImagePicker
  selectButtonImageUrl="" // 上传按钮背景图
  files={files} // 文件集合 [{url: ''}]
  imageStyle={{ // 单个图片的样式
    width: 100,
    height: 100
  }}
  selectable // 具备上传权限
  deletable // 具备删除权限
  max={3} // 最大上传个数
  containerStyle={{}} // 图片组样式
  change={this.imagesChange.bind(this)} // 图片列表改变后的返回 返回值 files
```

继承了 原生 TextInput 组件

```js
import DatePicker from '../../components/TextInput';
<TextInut
  style={styles.input}
  placeholder="请输入低值多少元"
  value={money}
  onChangeText={text => {
    this.setState({ money: text });
  }}
/>;
```

## 规范

- 命名规范：

通用：

- 多单词描述采取驼峰命名，如未特殊强调，则首字母小写

领域相关命名：

- 商家：business
- 卡劵：cardWoucher
- 评价：evaluate
- 菜品：dish
- 营收：revenue
- 广告：ad
- 顾客：customer
- 银行卡：bankCard
- 订单：order
- 购物车：shoppingCart
- 账单：bill
- 卡包：cardBag
- 我的：my

- 业务组件命名

  - 业务名称 + 组件形态描述
  - 首字母大写

- 基础组件命名

  - Base + 组件形态名称

## help

- 枚举使用

```JS
$t('KET.VALUE')
```

- 路由跳转

```js
import { NavigationActions, StackActions } from 'react-navigation';
const { dispatch, navigation } = this.props;
// 路由跳转
const navigateAction = NavigationActions.navigate({
  routeName: 'Home',
  params: {}
});
// 路由替换
const navigateAction = StackActions.replace({
  key: navigation.state.key,
  routeName: 'Home',
  params: {}
});
navigation.dispatch(navigateAction);
```

- react-navigation 参考

  https://www.jianshu.com/p/2f575cc35780

- props 类型、必填、默认值

```js
import PropTypes from 'prop-types';

static propTypes = {
  images: PropTypes.string.isRequired,
  endTime: PropTypes.string.isRequired,
  status: PropTypes.string.isRequired
};
static defaultProps = {
  endTime: '2012',
  price: 21
};
```

- 适配 iPhone x

```js
import { SafeAreaView } from 'react-navigation';

class App extends Component {
  render() {
    return (
      <SafeAreaView style={styles.container}>
        <Text style={styles.paragraph}>This is top text.</Text>
        <Text style={styles.paragraph}>This is bottom text.</Text>
      </SafeAreaView>
    );
  }
}
```

- 如果需要在 导航 navigationOptions 中 自定义 header, 或者要在 header 中调用组件，并且需要使用 父组件的 属性 参考 src/views/Home.js

```js
export default class App extends Component {
  static navigationOptions = ({ navigation }) => {
    const logoutFun = navigation.getParam('logoutFun');
    const setUpFun = navigation.getParam('setUpFun');
    return {
      header: <HomeHeader logout={logoutFun} set-up={setUpFun} />
    };
  };

  componentWillMount() {
    const { navigation } = this.props;
    navigation.setParams({ logoutFun: this.logout.bind(this) });
  }

  /**
   * 设置
   */
  setUp() {}

  logout() {
    Alert.alert(
      '退出系统',
      '是否狠心离开？',
      [
        {
          text: '取消',
          onPress: () => console.log('Cancel Pressed'),
          style: 'cancel'
        },
        {
          text: '狠心退出',
          onPress: () => {
            CLEAR_All(); // 清楚所有缓存
            this.gotoLogin(); // 跳转登陆页
          }
        }
      ],
      { cancelable: false }
    );
  }

  gotoLogin() {
    const { navigation } = this.props;
    const navigateAction = StackActions.replace({
      key: navigation.state.key,
      routeName: 'Login'
    });
    navigation.dispatch(navigateAction);
  }

  render() {
    return (
      <ScrollView style={styles.container}>
        <View style={styles.body}>2</View>
      </ScrollView>
    );
  }
}
```

- 系统断定

```js
import os from '../utils/os';

type os = 'ios' | 'android';
```

- navigationOptions 属性

navigationOptions:配置 StackNavigator 的一些属性。

title:标题,如果设置了这个导航栏和标签栏的 title 就会变成一样的,不推荐使用

header:可以设置一些导航的属性,如果隐藏顶部导航栏只要将这个属性设置为 null

headerTitle:设置导航栏标题,推荐

headerBackTitle:设置跳转页面左侧返回箭头后面的文字,默认是上一个页面的标题。可以自定义,也可以设置为 null

headerTruncatedBackTitle:设置当上个页面标题不符合返回箭头后的文字时,默认改成"返回"

headerRight:设置导航条右侧。可以是按钮或者其他视图控件

headerLeft:设置导航条左侧。可以是按钮或者其他视图控件

headerStyle:设置导航条的样式。背景色,宽高等

headerTitleStyle:设置导航栏文字样式

headerBackTitleStyle:设置导航栏‘返回’文字样式

headerTintColor:设置导航栏颜色

headerPressColorAndroid:安卓独有的设置颜色纹理,需要安卓版本大于 5.0

gesturesEnabled:是否支持滑动返回手势,iOS 默认支持,安卓默认关闭

screen:对应界面名称,需要填入 import 之后的页面

mode:定义跳转风格

card:使用 iOS 和安卓默认的风格

modal:iOS 独有的使屏幕从底部画出。类似 iOS 的 present 效果

headerMode:返回上级页面时动画效果

float:iOS 默认的效果

screen:滑动过程中,整个页面都会返回

none:无动画

cardStyle:自定义设置跳转效果

transitionConfig: 自定义设置滑动返回的配置

onTransitionStart:当转换动画即将开始时被调用的功能

onTransitionEnd:当转换动画完成,将被调用的功能

path:路由中设置的路径的覆盖映射配置

initialRouteName:设置默认的页面组件,必须是上面已注册的页面组件

initialRouteParams:初始路由参数

initialRouteParams:初始路由参数

## TODO

1.上传营业执照等证明材料自动识别。 ----Regisster.js

## 注意事项

- 请求的返回体 responseObject 中有个属性是 sessionId，每次请后台时都会返回一个新的 sessionId，前端需要更新 sessionId
- 获取订单相关信息的时候，传的是订单的主键 id，非订单编号 code
- 最后付款页面缺少原型