机器人项目用ReactNative实现，并适配iOS

使用react native实现机器人app。
好处：一份代码可以分别运行到iOS和android系统（有些情况需要分别处理）
具体使用的部分代码和运行效果（左边为iOS）：

• 列表数据展示和下拉刷新实现：

  • 运行效果：

    
    下拉刷新.png
  • 部分代码：

  <FlatList
    renderItem={this.renderItem}//每个item显示的view
    data={this.props.screenProps.robotHealthList}>//数据源
    ListHeaderComponent = {this.header}
    ListFooterComponent={this.separator}
    ItemSeparatorComponent={this.separator}
    onRefresh={this.onRefresh}//刷新调用的函数
    refreshing={this.state.refreshing}//刷新状态，用来控制刷新效果
  </FlatList>

 renderItem = ({item}) => {
    return ...//返回一个view，从item中可以拿到数据源提供的数据
    )
  }

  separator = () => {
    return ...//返回一个view
  }

  header = () => {
    return ...//返回一个view
  }

  onRefresh = () => {
    // 一般进行网络请求或数据库读取，完成后修改数据源、refreshing
  }

只要设置了onRefresh，则会在列表头部添加一个标准的RefreshControl控件，以便实现下拉刷新的功能。同时需要正确设置refreshing属性控制loading的显示状态，一般在进行网络请求之前设置为true，完成请求时设置为false。

因为两个平台原生的RefreshControl实现不同，所以同样的代码运行效果不同

• 机器人健康详情：

  • 运行效果：

    
    健康详情.png
  • 部分代码：

  //当前页面：两个自定义控件
  //自定义控件
  <ComponentsHealthViewPager
    ...
    dataResource={this.state.robotHealthList}//数据源
    onViewPageChanged={this.onViewPageChanged}//ViewPage改变时调用
    ref={viewPager => { this.viewPager = viewPager}}/>
  //自定义控件
  <ComponentsTopologyView
    ...
    dataResource={this.state.robotHealthList}
    onComponentChanged={this.onComponentChanged}
    ref={componentsView => { this.componentsView = componentsView}}/>

  onViewPageChanged(position){
    this.componentsView.setCurrentComponent(position);
  }
  onComponentChanged(position){
    this.viewPager.setCurrentPage(position);
  }

//ComponentsHealthViewPager实现：
  <ViewPager 
    ...
    onPageSelected={this.onPageSelected}
  </ViewPager>

  //ViewPager改变时触发
  onPageSelected(event){
    this.props.onViewPageChanged(event.position);
  }

  //设置postion为当前显示页
  setCurrentPage(postion){
    this.viewPager.setPage(postion);
  }

//ComponentsTopologyView实现： 类似ComponentsHealthViewPager

• 机器人分布页面：react native可以和原生混编，这个页面由于与用户的交互比较多(手势操作)，相对比较复杂，所以是采用分别调用原生控件的方式实现的

  • 运行效果：

    
    机器人分布.png
  • 部分代码：

//TopologyView.js
import { requireNativeComponent, View } from 'react-native';
module.exports = requireNativeComponent('TopologyView', null);
//原生view写好之后按一定规则暴露出来，ReactNative就可以请求调用了
//如果iOS和android暴露的名字保持一致（比如'TopologyView'），调用时就可以统一处理