如何使用 react-native-paper 库在 react-native 中创建按钮？

react-native-paper 是一个 UI 库，提供了一些常见的 UI 组件，包括按钮、卡片、图标和文本等。在本文中，我将向您介绍如何使用 react-native-paper 库在 react-native 中创建按钮。

步骤

首先，您需要在您的 react-native 项目中安装 react-native-paper。您可以使用以下命令来安装：

npm install react-native-paper

接下来，您需要在您的组件中导入 react-native-paper 库：

import { Button } from 'react-native-paper';

现在，您可以使用以下代码创建一个按钮：

<Button icon="camera" mode="contained" onPress={() => console.log('Pressed')}>
  Press me
</Button>

在上面的代码中，我们使用了 icon 和 mode 属性。其中，icon 属性指定了按钮上的图标，mode 属性指定了按钮的类型。我们还添加了一个 onPress 属性，以便在按钮被按下时执行操作。

更多示例

以下是更多按钮示例：

• 仅有一个标签的按钮：

<Button mode="contained" onPress={() => console.log('Pressed')}>
  Press me
</Button>

• 带有图标和文本的按钮：

<Button icon="camera" mode="contained" onPress={() => console.log('Pressed')}>
  Press me
</Button>

• 禁用按钮：

<Button disabled mode="contained" onPress={() => console.log('Pressed')}>
  Press me
</Button>

• 按钮不带边框：

<Button mode="text" onPress={() => console.log('Pressed')}>
  Press me
</Button>

• 按钮带有边框：

<Button mode="outlined" onPress={() => console.log('Pressed')}>
  Press me
</Button>

• 按钮有自定义主题颜色：

import { DefaultTheme, Provider as PaperProvider } from 'react-native-paper';

const theme = {
  ...DefaultTheme,
  colors: {
    ...DefaultTheme.colors,
    primary: '#3498db',
  },
};

const App = () => (
  <PaperProvider theme={theme}>
    <Button mode="contained" onPress={() => console.log('Pressed')}>
      Press me
    </Button>
  </PaperProvider>
);

总结

在本文中，我们学习了如何在 react-native 中使用 react-native-paper 库创建按钮。我们了解了如何使用各种不同的属性自定义按钮，并在自定义主题颜色时提供了示例。