使用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'），调用时就可以统一处理
