如何在 React-Native App 中创建按钮

在 React-Native 中，创建按钮可以使用内置的组件 Button，也可以自定义按钮组件。

使用内置组件 Button

1. 导入 Button 组件

在组件文件中导入 Button 组件：

import { Button } from 'react-native';

2. 创建 Button 组件

在组件中创建 Button 组件并传入相应的属性：

<Button 
  title="按钮标题"
  onPress={() => {
    console.log('按钮被点击');
  }}
/>

其中，title 属性指定了按钮的文字内容，onPress 属性指定了按钮点击事件。

3. 完整代码

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

const MyButton = () => {
  return (
    <View>
      <Button 
        title="按钮标题"
        onPress={() => {
          console.log('按钮被点击');
        }}
      />
    </View>
  );
};

export default MyButton;

自定义按钮组件

1. 定义按钮组件样式

在样式文件中定义按钮组件的样式：

import { StyleSheet } from 'react-native';

const styles = StyleSheet.create({
  button: {
    backgroundColor: '#2196F3',
    padding: 10,
    borderRadius: 5,
  },
  text: {
    color: '#fff',
    fontSize: 16,
    fontWeight: 'bold',
  },
});

其中，button 样式定义了按钮的背景色、内边距和圆角半径，text 样式定义了按钮文字的颜色、字号和字重。

2. 创建自定义按钮组件

在组件中创建自定义按钮组件并传入相应的属性：

import React from 'react';
import { View, TouchableOpacity, Text } from 'react-native';
import styles from './styles';

const MyButton = ({ title, onPress }) => {
  return (
    <View>
      <TouchableOpacity 
        style={styles.button}
        onPress={onPress}
      >
        <Text style={styles.text}>{title}</Text>
      </TouchableOpacity>
    </View>
  );
};

export default MyButton;

其中，title 属性指定了按钮的文字内容，onPress 属性指定了按钮点击事件。

完整代码

// MyButton.js

import React from 'react';
import { View, TouchableOpacity, Text } from 'react-native';
import styles from './styles';

const MyButton = ({ title, onPress }) => {
  return (
    <View>
      <TouchableOpacity 
        style={styles.button}
        onPress={onPress}
      >
        <Text style={styles.text}>{title}</Text>
      </TouchableOpacity>
    </View>
  );
};

export default MyButton;

// styles.js

import { StyleSheet } from 'react-native';

const styles = StyleSheet.create({
  button: {
    backgroundColor: '#2196F3',
    padding: 10,
    borderRadius: 5,
  },
  text: {
    color: '#fff',
    fontSize: 16,
    fontWeight: 'bold',
  },
});

export default styles;

// App.js

import React from 'react';
import { View } from 'react-native';
import MyButton from './MyButton';

const App = () => {
  const handlePress = () => {
    console.log('按钮被点击');
  };

  return (
    <View>
      <MyButton title="自定义按钮" onPress={handlePress} />
    </View>
  );
};

export default App;

以上就是在 React-Native App 中创建按钮的两种方式。