1

我是新来的反应本地人。我正在使用反应原生元素和反应原生矢量图标。我的标题中有一个 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 和警报。

请帮忙

4

0 回答 0