如何在 React Native 中创建一个基本按钮？

在 React Native 中，我们可以使用 TouchableOpacity 和 TouchableNativeFeedback 组件来创建基本按钮。

TouchableOpacity

TouchableOpacity 组件可以用来创建一个响应用户点击操作的按钮。它会在用户按下时，产生一个不透明度变化。

示例代码

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

const AppButton = (props) => (
  <TouchableOpacity
    style={{
      backgroundColor: '#0275d8',
      padding: 10,
      borderRadius: 5,
      alignItems: 'center',
    }}
    onPress={props.onPress}
  >
    <Text style={{ color: '#fff' }}>{props.title}</Text>
  </TouchableOpacity>
);

export default AppButton;

代码解释

• TouchableOpacity 组件会将其子元素包含在内，并使用触摸操作时产生的点击效果来响应用户的操作。当用户按下并松开时，触发 onPress 事件。
• style 属性可以用来设置样式。在上面的示例中，我们设置了按钮的背景颜色、内边距、圆角，以及子元素在容器内的对齐方式。
• Text 元素是 TouchableOpacity 的子元素，用于显示按钮文本。我们设置了文本颜色为白色。

TouchableNativeFeedback

TouchableNativeFeedback 组件可以用来创建一个动态的按钮，它会在用户按下时，产生一个波纹效果。

示例代码

import React from 'react';
import { TouchableNativeFeedback, Text, View, StyleSheet } from 'react-native';

const AppButton = (props) => (
  <TouchableNativeFeedback onPress={props.onPress}>
    <View style={[styles.container, { backgroundColor: props.color }]}>
      <Text style={styles.title}>{props.title}</Text>
    </View>
  </TouchableNativeFeedback>
);

const styles = StyleSheet.create({
  container: {
    padding: 10,
    borderRadius: 5,
    alignItems: 'center',
  },
  title: {
    color: '#fff',
  },
});

export default AppButton;

代码解释

• TouchableNativeFeedback 组件会将其子元素包含在内，并在用户按下时，产生一个波纹效果。我们可以将 View 组件作为子元素，来显示按钮样式。
• onPress 属性可以用来响应用户点击操作。当用户按下并松开时，触发该事件。
• 使用 StyleSheet 对象来设置样式，可以大大提高代码复用性。在上面的示例中，我们分别设置了容器和文本元素的样式。容器样式设置了背景颜色、内边距、圆角以及子元素在容器内的对齐方式。文本元素样式设置了文本颜色为白色。

使用上述示例代码，我们可以快速创建基本按钮，以便于在 React Native 中开发更具体的应用程序。