使用react native實(shí)現(xiàn)機(jī)器人app。
好處：一份代碼可以分別運(yùn)行到iOS和android系統(tǒng)（有些情況需要分別處理）
具體使用的部分代碼和運(yùn)行效果（左邊為iOS）：

• 列表數(shù)據(jù)展示和下拉刷新實(shí)現(xiàn)：

  • 運(yùn)行效果：

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

  <FlatList
    renderItem={this.renderItem}//每個(gè)item顯示的view
    data={this.props.screenProps.robotHealthList}>//數(shù)據(jù)源
    ListHeaderComponent = {this.header}
    ListFooterComponent={this.separator}
    ItemSeparatorComponent={this.separator}
    onRefresh={this.onRefresh}//刷新調(diào)用的函數(shù)
    refreshing={this.state.refreshing}//刷新?tīng)顟B(tài)，用來(lái)控制刷新效果
  </FlatList>

 renderItem = ({item}) => {
    return ...//返回一個(gè)view，從item中可以拿到數(shù)據(jù)源提供的數(shù)據(jù)
    )
  }

  separator = () => {
    return ...//返回一個(gè)view
  }

  header = () => {
    return ...//返回一個(gè)view
  }

  onRefresh = () => {
    // 一般進(jìn)行網(wǎng)絡(luò)請(qǐng)求或數(shù)據(jù)庫(kù)讀取，完成后修改數(shù)據(jù)源、refreshing
  }

只要設(shè)置了onRefresh，則會(huì)在列表頭部添加一個(gè)標(biāo)準(zhǔn)的RefreshControl控件，以便實(shí)現(xiàn)下拉刷新的功能。同時(shí)需要正確設(shè)置refreshing屬性控制loading的顯示狀態(tài)，一般在進(jìn)行網(wǎng)絡(luò)請(qǐng)求之前設(shè)置為true，完成請(qǐng)求時(shí)設(shè)置為false。

因?yàn)閮蓚€(gè)平臺(tái)原生的RefreshControl實(shí)現(xiàn)不同，所以同樣的代碼運(yùn)行效果不同

• 機(jī)器人健康詳情：

  • 運(yùn)行效果：

    
    
    健康詳情.png
  • 部分代碼：

  //當(dāng)前頁(yè)面：兩個(gè)自定義控件
  //自定義控件
  <ComponentsHealthViewPager
    ...
    dataResource={this.state.robotHealthList}//數(shù)據(jù)源
    onViewPageChanged={this.onViewPageChanged}//ViewPage改變時(shí)調(diào)用
    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實(shí)現(xiàn)：
  <ViewPager 
    ...
    onPageSelected={this.onPageSelected}
  </ViewPager>

  //ViewPager改變時(shí)觸發(fā)
  onPageSelected(event){
    this.props.onViewPageChanged(event.position);
  }

  //設(shè)置postion為當(dāng)前顯示頁(yè)
  setCurrentPage(postion){
    this.viewPager.setPage(postion);
  }

//ComponentsTopologyView實(shí)現(xiàn)： 類似ComponentsHealthViewPager

• 機(jī)器人分布頁(yè)面：react native可以和原生混編，這個(gè)頁(yè)面由于與用戶的交互比較多(手勢(shì)操作)，相對(duì)比較復(fù)雜，所以是采用分別調(diào)用原生控件的方式實(shí)現(xiàn)的

  • 運(yùn)行效果：

    
    
    機(jī)器人分布.png
  • 部分代碼：

//TopologyView.js
import { requireNativeComponent, View } from 'react-native';
module.exports = requireNativeComponent('TopologyView', null);
//原生view寫好之后按一定規(guī)則暴露出來(lái)，ReactNative就可以請(qǐng)求調(diào)用了
//如果iOS和android暴露的名字保持一致（比如'TopologyView'），調(diào)用時(shí)就可以統(tǒng)一處理