Touchable Opacity Header React Native

Question

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

Вот ссылка, где я добавил пользовательский компонент в заголовок с помощью onPress, но он запускает только onRender

https://snack.expo.io/r10TGyieE

Что такоеЯ делаю не так?

Answer 1

ваше событие onPress не является обязательным, поэтому оно будет запускаться при запуске приложения.

при использовании функции стрелки Es6 ваша функция привязывается по умолчанию. onPress={()=>this.someFunction()}

в противном случае вынеобходимо выполнить связывание вручную onPress={this.someFunction.bind(this)}, чтобы вызвать вашу функцию.

class LogoTitle extends React.Component {
  render() {
    return (
      <TouchableOpacity onPress={()=>alert('test')}>
        <Text style={{ color: "white", fontWeight:'bold' }}> List Layout</Text>
      </TouchableOpacity>
    );
  }
}

Answer 2

точно так же, как сказал Dadsquatch,

Это:

onPress={this.someAction()}

рассматривается как прямой код, и он исполняется, когда приложение достигает строки, в которой оно находится (именно поэтому оно выполняетсяпри запуске, хотя вы не упомянули об этом при запуске)

Но когда вы используете:

onPress={() => this.someAction()}

, вы сообщаете компилятору, что эта функция должна выполняться при возникновении onPress.И вы можете видеть, что это формат функции стрелки.

Answer 3

Как сказал Tarreq, вы можете использовать это

или иначе

onPress={this.someAction}

в качестве вызова метода onPress, чтобы вы могли напрямую написать имя функции.

Answer 4

https://snack.expo.io/HJvXPJix4

Вам нужно, чтобы он вызывал onPress={() => this.someAction()} вместо onPress={this.someAction()}