React Native: нельзя использовать метод из «routeMapper»?

Question

Я использую реагировать родной ящик https://github.com/root-two/react-native-drawer

Я пытаюсь вызвать метод OpenDrawer(), передав переменную в NavigationBarRouteMapper. Я попробовал войти в систему NavigationBarRouteMapper, и он регистрирует переданную переменную правильно.

class drawerPractice extends Component { 
... 

    openDrawer(){ 
    this._drawer.open() 
    } 

    render() { 
    return (
    <Drawer 
    content={<DrawerPanel/>} 
    openDrawerOffset={100} 
    ref={(ref) => this._drawer = ref} 
    type='static' 
    tweenHandler={Drawer.tweenPresets.parallax} 
    > 
     <Navigator 
      configureScene={this.configureScene} 
      initialRoute={{name: 'Start', component: Start}} 
      renderScene={this.renderScene} 
      style={styles.container} 
      navigationBar={ 
      <Navigator.NavigationBar 
       style={styles.navBar} 
       routeMapper={NavigationBarRouteMapper(this.openDrawer)} 
      /> 
      } 
     /> 
    </Drawer> 
    ); 
    } 
} 

var NavigationBarRouteMapper = openDrawer => ({ 
    LeftButton(route, navigator, index, navState){ 
     return(
      <TouchableHighlight onPress={()=>{openDrawer}}> 
       <Text>Open Menu</Text> 
      </TouchableHighlight> 
    ) 
    } 
    },... 

Почему может быть проблема: Но когда он используется внутри NavigationBarRouteMapper, нажав на кнопку Left Navigation «открытого ящика», это ничего не делать?

Answer 1

На вашем методе constructor() добавить следующее: this.openDrawer = this.openDrawer.bind(this);

Вы, вероятно, используя this на неверной области.

Answer 2

Существует общая путаница при работе с компонентами React и новым синтаксисом ES6 extends. Если вы используете React.createClass, он свяжет this со всеми вашими функциями, но при использовании подхода ES6 extends React.Component вам необходимо связать свои функции вручную.

Вы можете сделать это либо встроенный, используя

<TouchableHighlight onPress={()=>{this.openDrawer.bind(this)}}> 

В качестве альтернативы, вы можете добавить в свой конструктор, после super():

this.openDrawer = this.openDrawer.bind(this); 

Лично мне нравится этот подход, поскольку я нахожу этот код немного легче читать.

Для получения дополнительной информации о способе ES6, отметьте this link.