React Native中Button的onPress属性用法及代码错误排查

onPress属性基本用法 #

React Native内置Button组件的onPress属性用于指定按钮点击时触发的回调逻辑，使用时需注意：

• 必须传入函数引用（不能写成onPress={handle()}，否则组件渲染时会立即执行函数，而非点击时触发）
• 两种常见定义方式：
  • 直接在onPress中写箭头函数：onPress={() => console.log("pressed")}
  • 先定义独立函数再传入引用：先声明handle函数，再写onPress={handle}

代码错误排查 #

你的代码存在3个关键错误，导致无法正常运行：

1. 函数定义语法错误：函数组件App内部的handle()写法不符合JavaScript规则，在函数组件中定义内部函数，需用const handle = () => {}（箭头函数）或function handle() {}（函数声明）的方式。
2. RN Button不支持variant属性：React Native内置Button组件没有variant这个属性，该属性属于第三方UI库（如Material UI），直接移除即可。
3. styles变量拼写换行错误：const st和yles被错误拆分为两行，导致变量名无效，需合并为const styles。

修正后的完整代码 #

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';

export default function App() {
  const handle = () => {
    console.log("pressed");
  };

  return (
    <View style={styles.container}>
      <Text>HEllo World!</Text>
      <Button title="hello" onPress={handle} />
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

内容的提问来源于stack exchange，提问作者Hafeel Ahmed