如何在React Native中引入HTMLButtonElement？代码运行报错求助

错误原因 #

React Native 不支持HTML原生标签，你写的<button>是网页端的HTML元素，在React Native环境里找不到对应的组件实现，所以抛出这个错误。另外React Native要求组件名必须大写开头，这也是报错信息里提示的原因之一。

解决方案 #

方案1：使用React Native官方Button组件 #

React Native有自己的Button组件，需要先导入再使用，示例代码：

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

const App = () => {
  return (
    <SafeAreaView>
      <Button 
        title="test" 
        onPress={() => Alert.alert('按钮被点击')}
      />
    </SafeAreaView>
  );
};

export default App;

注意：官方Button组件属性有限，不支持自定义data-code这类属性，如果需要自定义属性或更灵活的样式，用下面的方案。

方案2：用TouchableOpacity自定义按钮 #

如果需要添加自定义属性或者自定义样式，推荐用TouchableOpacity（点击会有透明度变化的交互）包裹Text组件来模拟按钮，这样可以自由添加自定义属性：

import React from 'react';
import {SafeAreaView, TouchableOpacity, Text, StyleSheet} from 'react-native';

const App = () => {
  const handlePress = () => {
    // 这里可以获取自定义属性
    console.log('按钮的data-code:', 'test');
  };

  return (
    <SafeAreaView>
      <TouchableOpacity 
        style={styles.button}
        onPress={handlePress}
        data-code="test" // 自定义属性可以正常添加
      >
        <Text style={styles.buttonText}>test</Text>
      </TouchableOpacity>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  button: {
    padding: 10,
    backgroundColor: '#2196F3',
    borderRadius: 4,
  },
  buttonText: {
    color: 'white',
    textAlign: 'center',
  },
});

export default App;

内容的提问来源于stack exchange，提问作者Papp Zoltán