как использовать ES6 с реагировать родной

Question

как использовать ES6 с реагировать родной

0

Работа с React-Native и попытка изучения синтаксиса ES6. Вчера у меня была аналогичная проблема, и я получил решение. я добавил

.bind (это)

к моим вызовам моей функции, и проблема была решена. Я снова столкнулся с тем же вопросом с другим вызовом функции, и я не могу отследить, что происходит. Сообщение об ошибке одно и то же.

undefined не является объектом (оценка "this.props.drawer.open")

Функция:

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

и это называется с этим:

onPress={this.onClickMenu.bind(this)}

Вот весь код. Если вы видите что-то другое, кроме этой проблемы, которая не выглядит правильно, дайте мне знать, пожалуйста! * note Я заменил "var" на "let". Из того, что я прочитал, это правильный синтаксис ES6, чтобы делать это везде?

    'use strict';

const React = require('react-native');
const {
  Text,
  View,
  Component,
  StyleSheet,
  SwitchAndroid
} = React;

import { Button } from 'react-native-material-design';
import Store from 'react-native-simple-store';
import Underscore from 'underscore';
import RNGMap from 'react-native-gmaps';
import Polyline from 'react-native-gmaps/Polyline';
import Icon from 'react-native-vector-icons/Ionicons';
import SettingsService from './../settings/settings.service';
//import subdivisions from './subdivisions.json';
import commonStyles from './../common/styles';

let accessToken = null;
let userId = null;
let routeId = null;
let subdivisionId = null;

SettingsService.init('Android');

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

  componentDidMount() {
    Store.get('token').then((token) => {
      accessToken = token.access_token;
      userId = token.userId;
    });
    let 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) {});
    // geofence event
    this.locationManager.on("geofence", function(geofence) {});
    // error event
    this.locationManager.on("error", function(error) {
      console.log('- ERROR: ', JSON.stringify(error));
    });
    // motionchange event
    this.locationManager.on("motionchange", function(event) {
      me.updatePaceButtonStyle();
    });

    // getGeofences
    this.locationManager.getGeofences(function(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) {
        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: require("image!transparent_circle"),
      anchor: [0.5, 0.5],
      coordinates: {
        lat: location.coords.latitude,
        lng: location.coords.longitude
      }
    };
  }

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

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

  onClickEnable() {
    let 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;
    }
    let isMoving = !this.state.isMoving;
    this.locationManager.changePace(isMoving);

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

  onClickLocate() {
    let me = this;

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

  onRegionChange() {}

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

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

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

  updatePaceButtonStyle() {
    let 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) ? 'Stop Trip' : 'Start Trip'
    });
  }

  render() {
    return (
      <View style={commonStyles.container}>
        <View style={commonStyles.topToolbar}>
          <Icon.Button name="android-options" onPress={this.onClickMenu.bind(this)} backgroundColor="transparent" size={30} color="#000" style={styles.btnMenu} underlayColor={"transparent"} />
          <Text style={commonStyles.toolbarTitle}>Background Geolocation</Text>
          <SwitchAndroid onValueChange={this.onClickEnable.bind(this)} value={this.state.enabled} />
        </View>
        <View ref="workspace" style={styles.workspace} onLayout={this.onLayout.bind(this)}>

          <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.bind(this)} 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>
          <Button raised={true} 
                  text={this.state.paceButtonIcon} 
                  onPress={this.onClickPace.bind(this)}
                  overrides={{backgroundColor:"#e12429",textColor:"#ffffff"}} 
                  style={this.state.paceButtonStyle}></Button>
          <Text>&nbsp;</Text>
        </View>
      </View>
    );
  }
};

const styles = StyleSheet.create({
  workspace: {
    flex: 1
  }
});

module.exports = Map;

UPDATE: отладка через adb в терминале показывает ту же ошибку

Итак, вот остальная часть кода. для устранения неполадок. Я добавил файлы проекта в плункер. это демонстрационный проект, над которым я работаю. plunker

    'use strict';

const React = require('react-native');
const {
  Text, 
  Component,
  StyleSheet, 
  AppRegistry
} = React;

import Map from './map/map';
import Drawer from 'react-native-drawer';
import Settings from './settings/settings.android';
import Icon from 'react-native-vector-icons/Ionicons';
import BackgroundGeolocation from 'react-native-background-geolocation-android';

global.bgGeo = BackgroundGeolocation;

class App extends Component {
  onClickMenu() {
    this.props.refs.drawer.open();
  }

  render() {
    return (
      <Drawer ref="drawer" side="right" acceptPan={false} content={<Settings drawer={this.refs.drawer} locationManager={BackgroundGeolocation} />}>
        <Map drawer={this.refs.drawer} locationManager={BackgroundGeolocation} />    
      </Drawer>
    );
  }
};

module.exports = App;

ОБНОВЛЕНИЕ:

texas697 04 март 2016, в 13:38

Источник

0

Я не думаю, что ваш код показывает, какие props передаются вашему компоненту, а ошибка не указывает, какая часть не определена. Вы предполагаете, что контекст не передается, возможно ли, что drawer (или даже props ) не определен? Некоторые записи подтвердят это.
Matt Styles 04 март 2016, в 12:52
0

хорошо, как я могу получить регистрацию?
texas697 04 март 2016, в 12:53
0

просто console.log, при запуске приложения XCode будет отображать журналирование JS через панель отладки. больше информации
Matt Styles 04 март 2016, в 12:57
0

только что обновленный пост
texas697 04 март 2016, в 13:16
0

и что происходит, когда вы вставляете console.log( this ) или console.log( this.props ) в качестве первой строки в onClickMenu ?
Matt Styles 04 март 2016, в 13:19
0

О, только что увидел еще несколько правок, я не уверен в точной проблеме (отсюда и отсутствие ответа), но вы все равно не можете пропустить такой компонент в React, в лучшем случае вы будете передавать ссылку на элемент компонент (не уверен, как это разыгрывается в реагировать родной). Вы можете передать функцию детям, чтобы они вызывали drawer.open() или drawer.close() .
Matt Styles 04 март 2016, в 13:22
0

хорошо, только что сделал обновление поста
texas697 04 март 2016, в 13:41
0

Ха, да, ну, есть проблема! Я постараюсь написать ответ, чтобы помочь, поскольку я думаю, что решение состоит в том, чтобы пройти через функцию, а не пытаться пройти через ссылку непосредственно.
Matt Styles 04 март 2016, в 14:04
0

Ок, отлично. действительно ценю это!
texas697 04 март 2016, в 14:12

Показать ещё 7 комментариев

Теги:

javascript

ecmascript-6

reactjs

react-native

syntax

1 ответ

Ещё вопросы

Я не думаю, что ваш код показывает, какие props передаются вашему компоненту, а ошибка не указывает, какая часть не определена. Вы предполагаете, что контекст не передается, возможно ли, что drawer (или даже props ) не определен? Некоторые записи подтвердят это.
хорошо, как я могу получить регистрацию?
просто console.log, при запуске приложения XCode будет отображать журналирование JS через панель отладки. больше информации
и что происходит, когда вы вставляете console.log( this ) или console.log( this.props ) в качестве первой строки в onClickMenu ?
О, только что увидел еще несколько правок, я не уверен в точной проблеме (отсюда и отсутствие ответа), но вы все равно не можете пропустить такой компонент в React, в лучшем случае вы будете передавать ссылку на элемент компонент (не уверен, как это разыгрывается в реагировать родной). Вы можете передать функцию детям, чтобы они вызывали drawer.open() или drawer.close() .
хорошо, только что сделал обновление поста
Ха, да, ну, есть проблема! Я постараюсь написать ответ, чтобы помочь, поскольку я думаю, что решение состоит в том, чтобы пройти через функцию, а не пытаться пройти через ссылку непосредственно.
Ок, отлично. действительно ценю это!

Matt Styles · Accepted Answer · 2016-03-04T14-26-00.000Z

Я не думаю, что вы можете пройти через ссылки на компоненты таким образом, конечно, это не сработает в React и я не думаю, что так будет работать в React-Native.

Я не понимаю, почему вы пытаетесь. .open Drawer из компонента " Map поскольку он выглядит так, как только компонент " Map доступен, только если Drawer открыт, но если вы хотите получить доступ к родительским поведением от детей, то хороший шаблон для выполнения функций для выполнения детьми (вы можете утверждать, что это действительно плохо, и что передача событий вокруг является более надежной моделью).

Я никогда не использовал библиотеку, поэтому я не совсем понимаю ее использование, но вы можете передавать функции следующим образом:

class Application extends Component {

  closeControlPanel = () => {
    this.refs.drawer.close()
  };
  openControlPanel = () => {
    this.refs.drawer.open()
  };
  render () {
    return (
      <Drawer
        ref="drawer"
        content={<ControlPanel />}
        >
        <Map onMenuClose={ this.closeControlPanel.bind( this ) } />
      </Drawer>
    )
  }
})

В этом случае this.props.onMenuClose следует присоединить к действию, которое, когда будет выполнено, вызовет функцию от родителя и выполнит функцию this.refs.drawer.close.

Хорошо. Я сейчас не за компьютером, но подключу его как можно скорее. На самом деле это мой первый прореагирующий проект, поэтому я учусь по ходу дела. Я получил это как демонстрационный проект, и я подумал, что смогу преобразовать его в ES6 для совместимости с большинством проектов. Проблема с использованием демонстрационных проектов, чтобы узнать, вы никогда не знаете, что сделал осел