react-native-material-design - GitLite

KO | EN

gitlite — search

#python #hacktoberfest #react #ai #typescript #android #deep-learning #docker #nodejs #windows #cli #awesome-list #vue #ios

react-native-material-design

(★ 3,125)

React Native UI Components for Material Design

파일 탐색기

최종 버전 다운로드 (.zip)

- - Actions.js
  - Body.js
  - index.js
  - Media.js
- - Header.js
  - index.js
  - Section.js
- - Elevation.js
  - Ripple.js
- Avatar.js
- Button.js
- Checkbox.js
- CheckboxGroup.js
- config.js
- Divider.js
- helpers.js
- Icon.js
- IconToggle.js
- index.js
- List.js
- RadioButton.js
- RadioButtonGroup.js
- Ripple.js
- Subheader.js
- Toolbar.js
- VectorIconComponent.js
.eslintrc
.gitignore
CONTRIBUTING.md
LICENSE
package.json
README.md

# 설치 가이드

1. 코드 내려받기

git clone https://github.com/invertase/react-native-material-design

깃허브에서 프로젝트 코드 전체를 내 컴퓨터로 내려받습니다.

cd react-native-material-design

방금 내려받은 프로젝트 폴더 안으로 이동합니다.

2. Node.js

쉬움 추천

사전 준비물

Git GitHub에서 프로젝트 코드를 내려받으려면 필요합니다.
Node.js npm 명령어를 쓰려면 Node.js가 설치되어 있어야 합니다. LTS(장기지원) 버전을 추천합니다.

npm i react-native-material-design --save

이 명령어를 터미널에 그대로 입력해 실행하세요.

✅ 명령어 실행 후 터미널에 나타나는 주소(보통 http://localhost:3000 형태)를 브라우저에서 열어보세요.

이 레포의 README에 적힌 실제 명령어를 그대로 가져왔습니다.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

> This library is **no longer maintained**. As an alternative we highly recommend checking out [React Native Paper](https://github.com/callstack/react-native-paper) by the awesome folks over at @callstack. ✨

# React Native Material Design

[![npm](https://img.shields.io/npm/v/react-native-material-design.svg)](https://www.npmjs.com/package/react-native-material-design)
[![Dependency Status](https://david-dm.org/react-native-material-design/react-native-material-design.svg)](https://david-dm.org/react-native-material-design/react-native-material-design.svg)
[![GitHub issues](https://img.shields.io/github/issues/react-native-material-design/react-native-material-design.svg)](https://github.com/react-native-material-design/react-native-material-design/issues)
[![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://raw.githubusercontent.com/react-native-material-design/react-native-material-design/master/LICENSE)
[![Join the chat at https://gitter.im/react-native-material-design/react-native-material-design](https://badges.gitter.im/react-native-material-design/react-native-material-design.svg)](https://gitter.im/react-native-material-design/react-native-material-design?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)

React Native components which implement [Material Design](https://www.google.com/design/spec/material-design/introduction.html).

This repository has been heavily developed on top of the [mrn](https://github.com/binggg/mrn) project started by **@binggg**. Improvements include support for the latest React Native versions,
many bug fixes, extra components, backward compatibility to Android SDK API 16 and more.

> Please keep in mind this is still a work in progress. The master branch is subject to breaking changes.

Looking for a demo app? [Check out the repo](https://github.com/react-native-material-design/demo-app).

Or view it online [here](https://appetize.io/app/hyp1m20y515c16cj5yw2karcjg)! (Credits to Appetize for free hosting).

## Installation

```
npm i react-native-material-design --save
```

Follow the [Android installation instructions](https://github.com/oblador/react-native-vector-icons#android) on the [react-native-vector-icons](https://github.com/oblador/react-native-vector-icons) library, which consists of adding the following to your `./android/app/build.gradle`:

```gradle
apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"
```

_Note: It's possible that the instructions on the react-native-vector-icons page differ from what is above. If that's the case, follow those instructions, and please file an issue with us to update it here._

Import any required components into your project, for example:

```
import { Button, Card } from 'react-native-material-design';
```

> You may need to restart your packager in order for the icons to render.

## Documentation

Documentation & full installation instructions are available at http://react-native-material-design.github.io

## React Native 0.16+

This library only works with React Native 0.16+ due to the breaking changes with Babel and font loading it introduced.

## Examples

![Example 1](https://raw.githubusercontent.com/react-native-material-design/demo-app/master/resources/examples-1.jpg "Example 1")
![Example 2](https://raw.githubusercontent.com/react-native-material-design/demo-app/master/resources/examples-2.jpg "Example 2")
![Example 3](https://raw.githubusercontent.com/react-native-material-design/demo-app/master/resources/examples-3.jpg "Example 3")

## Contributing

Full contributing guidelines are to be written, however please ensure you follow the points when sending in PRs:

- Ensure no lint warns occur via `npm run lint`.
- Follow the Material Design [guidelines](https://www.google.com/design/spec/layout/metrics-keylines.html#metrics-keylines-baseline-grids).