如何从react原生javascript语法切换到es6

我正在将一些代码改写为es6语法，但遇到了问题。这是我的第一个react本地项目，所以我对一些事情不熟悉。我从这个演示开始 我添加了带有登录屏幕的导航。当我登录并切换视图时，我在

 onLayout() {
var me = this,
  gmap = this.refs.gmap;

this.refs.workspace.measure(function(ox, oy, width, height, px, py) {
  me.setState({
    mapHeight: height,
    mapWidth: width
  });
 });
}

undefined不是对象（正在计算'this.refs'）

这是整个文件。如果你需要更多的信息，让我知道！谢谢

Map.js

    class Map extends Component {
  constructor(props) {
    super(props)
    this.state = {
      locationIcon: require("image!green_circle"),
      currentLocation: undefined,
      locationManager: undefined,
      enabled: false,
      isMoving: false,
      odometer: 0,
      paceButtonStyle: commonStyles.disabledButton,
      paceButtonIcon: 'play',
      navigateButtonIcon: 'navigate',
      mapHeight: 300,
      mapWidth: 300,
      // mapbox
      center: {
        lat: 40.7223,
        lng: -73.9878
      },
      zoom: 10,
      markers: []
    }
  }

  componentDidMount() {

    var me = this,
      gmap = this.refs.gmap;

    this.locationManager = this.props.locationManager;

    // location event
    this.locationManager.on("location", function(location) {
      console.log('- location: ', JSON.stringify(location));
      me.setCenter(location);
      gmap.addMarker(me._createMarker(location));

      me.setState({
        odometer: (location.odometer / 1000).toFixed(1)
      });

      // Add a point to our tracking polyline
      if (me.polyline) {
        me.polyline.addPoint(location.coords.latitude, location.coords.longitude);
      }
    });
    // http event
    this.locationManager.on("http", function(response) {
      console.log('- http ' + response.status);
      console.log(response.responseText);
    });
    // geofence event
    this.locationManager.on("geofence", function(geofence) {
      console.log('- onGeofence: ', JSON.stringify(geofence));
    });
    // error event
    this.locationManager.on("error", function(error) {
      console.log('- ERROR: ', JSON.stringify(error));
    });
    // motionchange event
    this.locationManager.on("motionchange", function(event) {
      console.log("- motionchange", JSON.stringify(event));
      me.updatePaceButtonStyle();
    });

    // getGeofences
    this.locationManager.getGeofences(function(rs) {
      console.log('- getGeofences: ', JSON.stringify(rs));
    }, function(error) {
      console.log("- getGeofences ERROR", error);
    });

    SettingsService.getValues(function(values) {
      values.license = "eddbe81bbd86fa030ea466198e778ac78229454c31100295dae4bfc5c4d0f7e2";
      values.orderId = 1;
      values.stopTimeout = 0;
      //values.url = 'http://192.168.11.120:8080/locations';

      me.locationManager.configure(values, function(state) {
        console.log('- configure state: ', state);
        me.setState({
          enabled: state.enabled
        });
        if (state.enabled) {
          me.initializePolyline();
          me.updatePaceButtonStyle()
        }
      });
    });

    this.setState({
      enabled: false,
      isMoving: false
    });
  }
  _createMarker(location) {
    return {
      title: location.timestamp,
      id: location.uuid,
      icon: this.locationIcon,
      anchor: [0.5, 0.5],
      coordinates: {
        lat: location.coords.latitude,
        lng: location.coords.longitude
      }
    };
  }

  initializePolyline() {
    // Create our tracking Polyline
    var me = this;
    Polyline.create({
      points: [],
      geodesic: true,
      color: '#2677FF',
      width: 12
    }, function(polyline) {
      me.polyline = polyline;
    });
  }

  onClickMenu() {
    this.props.drawer.open();
  }

  onClickEnable() {
    var me = this;
    if (!this.state.enabled) {
      this.locationManager.start(function() {
        me.initializePolyline();
      });
    } else {
      this.locationManager.resetOdometer();
      this.locationManager.stop();
      this.setState({
        markers: [{}],
        odometer: 0
      });
      this.setState({
        markers: []
      });
      if (this.polyline) {
        this.polyline.remove(function(result) {
          me.polyline = undefined;
        });
      }
    }

    this.setState({
      enabled: !this.state.enabled
    });
    this.updatePaceButtonStyle();
  }

  onClickPace() {
    if (!this.state.enabled) {
      return;
    }
    var isMoving = !this.state.isMoving;
    this.locationManager.changePace(isMoving);

    this.setState({
      isMoving: isMoving
    });
    this.updatePaceButtonStyle();
  }

  onClickLocate() {
    var me = this;

    this.locationManager.getCurrentPosition({
      timeout: 30
    }, function(location) {
      me.setCenter(location);
      console.log('- current position: ', JSON.stringify(location));
    }, function(error) {
      console.error('ERROR: getCurrentPosition', error);
      me.setState({
        navigateButtonIcon: 'navigate'
      });
    });
  }

  onRegionChange() {
    console.log('onRegionChange');
  }

  setCenter(location) {
    this.setState({
      navigateButtonIcon: 'navigate',
      center: {
        lat: location.coords.latitude,
        lng: location.coords.longitude
      },
      zoom: 16
    });
  }

  onLayout() {
    var me = this,
      gmap = this.refs.gmap;

    this.refs.workspace.measure(function(ox, oy, width, height, px, py) {
      me.setState({
        mapHeight: height,
        mapWidth: width
      });
    });
  }

  updatePaceButtonStyle() {
    var style = commonStyles.disabledButton;
    if (this.state.enabled) {
      style = (this.state.isMoving) ? commonStyles.redButton : commonStyles.greenButton;
    }
    this.setState({
      paceButtonStyle: style,
      paceButtonIcon: (this.state.enabled && this.state.isMoving) ? 'pause' : 'play'
    });
  }

  render() {
    return (
      <View style={commonStyles.container}>
        <View style={commonStyles.topToolbar}>
          <Icon.Button name="android-options" onPress={this.onClickMenu} backgroundColor="transparent" size={30} color="#000" style={styles.btnMenu} underlayColor={"transparent"} />
          <Text style={commonStyles.toolbarTitle}>Background Geolocation</Text>
          <SwitchAndroid onValueChange={this.onClickEnable} value={this.state.enabled} />
        </View>
        <View ref="workspace" style={styles.workspace} onLayout={this.onLayout}>
          <RNGMap
            ref={'gmap'}
            style={{width: this.state.mapWidth, height: this.state.mapHeight}}
            markers={this.state.markers}
            zoomLevel={this.state.zoom}
            onMapChange={(e) => console.log(e)}
            onMapError={(e) => console.log('Map error --> ', e)}
            center={this.state.center} />

        </View>
        <View style={commonStyles.bottomToolbar}>
          <Icon.Button name={this.state.navigateButtonIcon} onPress={this.onClickLocate} size={25} color="#000" underlayColor="#ccc" backgroundColor="transparent" style={styles.btnNavigate} />
          <Text style={{fontWeight: 'bold', fontSize: 18, flex: 1, textAlign: 'center'}}>{this.state.odometer} km</Text>
          <Icon.Button name={this.state.paceButtonIcon} onPress={this.onClickPace} iconStyle={commonStyles.iconButton} style={this.state.paceButtonStyle}><Text>State</Text></Icon.Button>
          <Text>&nbsp;</Text>
        </View>
      </View>
    );
  }
};

module.exports = Map;

类映射扩展组件{
建造师（道具）{
超级（道具）
此.state={
位置图标：需要（“图像！绿色圆圈”），
当前位置：未定义，
locationManager:未定义，
启用：false，
伊斯莫温：错，
里程表：0，
paceButtonStyle:commonStyles.disabledButton，
尼康：“玩”，
导航按钮：“导航”，
地图高度：300，
地图宽度：300，
//地图盒
中心：{
纬度：40.7223，
液化天然气：-73.9878
},
缩放：10，
标记：[]
}
}
componentDidMount（）{
var me=这个，
gmap=this.refs.gmap；
this.locationManager=this.props.locationManager；
//位置事件
此.locationManager.on（“位置”），函数（位置）{
log（'-location:'，JSON.stringify（location））；
me.setCenter（位置）；
gmap.addMarker（me._createMarker（位置））；
我是塞斯塔({
里程表：（位置.里程表/1000）.toFixed（1）
});
//将点添加到跟踪多段线
if（me.多段线）{
me.polyline.addPoint（location.coords.lation，location.coords.longitude）；
}
});
//http事件
this.locationManager.on（“http”，函数（响应）{
log（'-http'+response.status）；
console.log（response.responseText）；
});
//地球围栏活动
此.locationManager.on（“地理围栏”，功能（地理围栏）{
log（'-onGeofence:'，JSON.stringify（geoffence））；
});
//错误事件
this.locationManager.on（“错误”，函数（错误）{
log（'-ERROR:'，JSON.stringify（ERROR））；
});
//运动变化事件
this.locationManager.on（“motionchange”，函数（事件）{
log（“-motionchange”，JSON.stringify（event））；
me.updatePaceButtonStyle（）；
});
//围篱
this.locationManager.getGeofences（函数（rs）{
log（'-getgeofenses:'，JSON.stringify（rs））；
}，函数（错误）{
log（“-getgeofenses ERROR”，ERROR）；
});
SettingsService.getValues（函数（值）{
values.license=“EDDB81BBD86FA030EA466198E778AC7822945C31100295DAE4BFC5C4D0F7E2”；
values.orderId=1；
values.stopTimeout=0；
//values.url=http://192.168.11.120:8080/locations';
me.locationManager.configure（值、函数（状态）{
log（'-configure state:'，state）；
我是塞斯塔({
已启用：state.enabled
});
如果（state.enabled）{
me.initializePolyline（）；
me.updatePaceButtonStyle（）
}
});
});
这是我的国家({
启用：false，
伊斯莫温：错
});
}
_createMarker（位置）{
返回{
标题：location.timestamp，
id:location.uuid，
图标：this.locationIcon，
锚定：[0.5,0.5]，
坐标：{
纬度：位置坐标纬度，
液化天然气：位置.坐标.经度
}
};
}
initializePolyline（）{
//创建跟踪多段线
var me=这个；
Polyline.create({
要点：[]，
测地线：正确，
颜色：“#2677FF”，
宽度：12
}，函数（多段线）{
me.polyline=多段线；
});
}
onClickMenu（）{
this.props.drawer.open（）；
}
onClickEnable（）{
var me=这个；
如果（！this.state.enabled）{
this.locationManager.start（函数（）{
me.initializePolyline（）；
});
}否则{
此.locationManager.reset里程表（）；
this.locationManager.stop（）；
这是我的国家({
标记：[{}]，
里程表：0
});
这是我的国家({
标记：[]
});
if（此.多段线）{
此.polyline.remove（函数（结果）{
me.polyline=未定义；
});
}
}
这是我的国家({
已启用：！this.state.enabled
});
this.updatePaceButtonStyle（）；
}
onclickspace（）{
如果（！this.state.enabled）{
返回；
}
var isMoving=！this.state.isMoving；
this.locationManager.changePace（isMoving）；
这是我的国家({
isMoving：isMoving
});
this.updatePaceButtonStyle（）；
}
onClickLocate（）{
var me=这个；
this.locationManager.getCurrentPosition({
超时时间：30
}，功能（位置）{
me.setCenter（位置）；
log（'-current position:'，JSON.stringify（location））；
}，函数（错误）{
console.error（'error:getCurrentPosition'，error）；
我是塞斯塔({
导航按钮：“导航”
});
});
}
onRegionChange（）{
log（'onRegionChange'）；
}
设置中心（位置）{
这是我的国家({
导航按钮：“导航”，
中心：{
纬度：位置坐标纬度，
液化天然气：位置.坐标.经度
},
缩放：16
});
}
网上购物{
var me=这个，
gmap=this.refs.gmap；
此.refs.workspace.measure（函数（ox、oy、宽度、高度、px、py）{
我是塞斯塔({
地图高度：高度，
mapWidth:width
});
});
}
updatePaceButtonStyle（）{
var style=commonStyles.disabledButton；
if（this.state.enabled）{
style=（this.state.isMoving）？commonStyles.redButton:commonStyles.greenButton；
}
这是我的国家({
paceButtonStyle:样式，
paceButtonIcon：（this.state.enabled&&this.state.isMoving）？“暂停”：“播放”
});
}
render（）{
返回(
背景地理定位
console.log（e）}
<View ref="workspace" style={styles.workspace} onLayout={this.onLayout.bind(this)}>

onLayout = () => {
...
};