Question

我是新来的本地人。我正在使用反应本机元素和反应本机矢量图标。我的标题中有一个Icon.Button，我很难过它才能正常工作。但是，当我单独使用该组件时，它会按预期工作

这是我的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组件，它的工作就很好。我得到console.log和警报。

请帮助

如何修复“ OnPress无法在标题内工作，但可以独立工作”

0 个答案: