mirror of
https://github.com/zhigang1992/react-native-paper.git
synced 2026-06-17 04:09:48 +08:00
131 lines
3.7 KiB
Markdown
131 lines
3.7 KiB
Markdown
---
|
|
title: Getting Started
|
|
---
|
|
|
|
## Installation
|
|
|
|
Open a Terminal in your project's folder and run,
|
|
|
|
```sh
|
|
yarn add react-native-paper
|
|
```
|
|
|
|
If you're on a vanilla React Native project, you also need to install and link [react-native-vector-icons](https://github.com/oblador/react-native-vector-icons).
|
|
|
|
```sh
|
|
yarn add react-native-vector-icons
|
|
react-native link react-native-vector-icons
|
|
```
|
|
|
|
If you don't want to install vector icons, you can use [babel-plugin-optional-require](https://github.com/satya164/babel-plugin-optional-require) to opt-out.
|
|
|
|
If you use CRNA or Expo, you don't need to install vector icons. But you will need to make sure that your `.babelrc` includes `babel-preset-expo`:
|
|
|
|
```json
|
|
{
|
|
"presets": ["expo"]
|
|
}
|
|
```
|
|
|
|
To get smaller bundle size by excluding modules you don't use, you can use our optional babel plugin. The plugin automatically rewrites the import statements so that only the modules you use are imported instead of the whole library. Add `react-native-paper/babel` to the `plugins` section in your `.babelrc`:
|
|
|
|
```json
|
|
{
|
|
"plugins": [
|
|
"react-native-paper/babel"
|
|
]
|
|
}
|
|
```
|
|
|
|
If you created your project using CRNA or Expo, you'll have an `env` section. You can create a new `production` key and place it below so it looks like this:
|
|
|
|
```json
|
|
{
|
|
"presets": ["babel-preset-expo"],
|
|
"env": {
|
|
"development": {
|
|
"plugins": ["transform-react-jsx-source"]
|
|
},
|
|
"production": {
|
|
"plugins": ["react-native-paper/babel"]
|
|
}
|
|
}
|
|
}
|
|
```
|
|
|
|
**Note:** The plugin only works if you are importing the library using ES2015 import statements and not with `require`.
|
|
|
|
## Usage
|
|
|
|
Wrap your root component in `Provider` from `react-native-paper`. If you have a vanilla React Native project, it's a good idea to add it in the component which is passed to `AppRegistry.registerComponent`. This will usually be in the `index.js` file. If you have a CRNA or Expo project, you can do this inside the exported component in the `App.js` file.
|
|
|
|
Example:
|
|
|
|
```js
|
|
import * as React from 'react';
|
|
import { AppRegistry } from 'react-native';
|
|
import { Provider as PaperProvider } from 'react-native-paper';
|
|
import App from './src/App';
|
|
|
|
export default function Main() {
|
|
return (
|
|
<PaperProvider>
|
|
<App />
|
|
</PaperProvider>
|
|
);
|
|
}
|
|
|
|
AppRegistry.registerComponent('main', () => Main);
|
|
```
|
|
|
|
The `PaperProvider` component provides the theme to all the components in the framework. It also acts as a portal to components which need to be rendered at the top level.
|
|
|
|
If you have another provider (such as `Redux`), wrap it outside `PaperProvider` so that the context is available to components rendered inside a `Modal` from the library:
|
|
|
|
```js
|
|
import * as React from 'react';
|
|
import { Provider as PaperProvider } from 'react-native-paper';
|
|
import { Provider as StoreProvider } from 'react-redux';
|
|
import App from './src/App';
|
|
import store from './store';
|
|
|
|
export default function Main() {
|
|
return (
|
|
<StoreProvider store={store}>
|
|
<PaperProvider>
|
|
<App />
|
|
</PaperProvider>
|
|
</StoreProvider>
|
|
);
|
|
}
|
|
```
|
|
|
|
## Customization
|
|
|
|
You can provide a custom theme to customize the colors, fonts etc. with the `Provider` component. Check the [default theme](https://github.com/callstack/react-native-paper/blob/master/src/styles/DefaultTheme.js) to see what customization options are supported.
|
|
|
|
Example:
|
|
|
|
```js
|
|
import * as React from 'react';
|
|
import { DefaultTheme, Provider as PaperProvider } from 'react-native-paper';
|
|
import App from './src/App';
|
|
|
|
const theme = {
|
|
...DefaultTheme,
|
|
colors: {
|
|
...DefaultTheme.colors,
|
|
primary: 'tomato',
|
|
accent: 'yellow',
|
|
},
|
|
};
|
|
|
|
export default function Main() {
|
|
return (
|
|
<PaperProvider theme={theme}>
|
|
<App />
|
|
</PaperProvider>
|
|
);
|
|
}
|
|
```
|