Android 的 React-Native Type-Script：按钮不听 onPress

Question

我按照说明在 MacOs 上设置开发环境，使用 Android Studio 和 react-native 按照此处的说明进行操作：

https://reactnative.dev/docs/environment-setup

我使用这条线初始化了一个简单的示例项目

npx react-native@latest init TTG

这个例子很好用。

然后我在示例中添加了一个这样的函数：

function logIt(){

    console.log("Foobar");

}

还有一个调用函数的按钮：

    <Button
      title="Logit"
      accessibilityLabel="log it"
      onPress={logIt()}
      color="blue"
    />

当我运行应用程序时

npx react-native start --reset-cache

控制台显示

 LOG  Foobar

这是我觉得奇怪的第一件事。

当我按下模拟器中的按钮时，控制台没有显示任何内容。第二个奇怪的行为我不明白。

这是完整的代码 - 我将其剥离以删除所有示例内容，但结果保持不变：按钮不会触发功能：

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 */

import React from 'react';

import {
  SafeAreaView,
  Button
} from 'react-native';

function logIt(){

console.log("Foobar");

}

function App(): JSX.Element {

  return (

    <SafeAreaView>
            <Button
              title="Logit"
              accessibilityLabel="log it"
              onPress={logIt()}
              color="blue"
            />

    </SafeAreaView>
  );
}

export default App;

我错过了什么？

Answer 1

要么是onPress={logIt}，要么是onPress={() => logIt()}，否则你的函数会在创建元素的时候被调用。