Блог

Я новичок в react native. Я использую элементы react native и векторные значки react native. У меня есть значок.Кнопка внутри моего заголовка, мне трудно заставить ее работать. Однако, когда я использую компонент сам по себе, он работает так, как ожидалось

это мой ButtonTest.tsx

 import React, { Component } from "react";
import { Button, StyleSheet, Text, View, Alert } from "react-native";
import Icon from "react-native-vector-icons/FontAwesome";

export default class ButtonTest extends Component {
  onPress = () => {
    console.log("Button was pressed");
    Alert.alert("Button was pressed");
  };

  render() {
    return (
      <View>
        <Icon.Button
          name="rocket"
          size={30}
          color="#FFFF"
          onPress={this.onPress}
        />
      </View>
    );
  }
}
  

Это работает так, как ожидалось.

однако, когда я использую ту же логику в моем AppHeader.tsx, это просто не работает

AppHeader.tsx

 import { Header } from "react-native-elements";
import React, { Component } from "react";
import { View, Alert, StyleSheet } from "react-native";
import Icon from "react-native-vector-icons/FontAwesome";

const AppHeader = () => {
  return (
    <View>
      <Header
        placement="left"
        leftComponent={{ icon: "menu", color: "#fff" }}
        centerComponent={{ text: "MY TITLE", style: { color: "#fff" } }}
        rightComponent={<Rocket />}
      />
      <Rocket />
    </View>
  );
};

class Rocket extends Component {
  onPress = () => {
    console.log("Button was pressed");
    Alert.alert("Button was pressed");
  };

  render() {
    return (
      <Icon.Button
        name="rocket"
        size={30}
        color="#FFFF"
        onPress={this.onPress}
      />
    );
  }
}

  

Заголовок приложения загружается отлично. Однако (на симуляторе), когда я пытаюсь щелкнуть по нему, ничего не происходит

но если я нажму на компонент ButtonTest, он будет работать отлично. Я получаю консоль.журнал и предупреждение.

Пожалуйста, помогите