https://github.com/youngjuning/vant-react-native.js.org

Lightweight React Native UI Components inspired on Vant
https://github.com/youngjuning/vant-react-native.js.org

react-native vant

Last synced: 3 days ago
JSON representation

Lightweight React Native UI Components inspired on Vant

• Host: GitHub
• URL: https://github.com/youngjuning/vant-react-native.js.org
• Owner: youngjuning
• Created: 2021-07-04T15:58:07.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2021-08-04T16:44:20.000Z (over 3 years ago)
• Last Synced: 2024-05-08T19:19:34.132Z (6 months ago)
• Topics: react-native, vant
• Language: TypeScript
• Homepage: https://vant-react-native.js.org/
• Size: 12.6 MB
• Stars: 55
• Watchers: 5
• Forks: 16
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • Codeowners: .github/CODEOWNERS

Awesome Lists containing this project

README

        
# `vant-react-native`

[![lerna](https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg)](https://lerna.js.org/) [![MIT License](https://img.shields.io/badge/License-MIT-orange.svg)](https://opensource.org/licenses/MIT)

## Install

```sh

yarn add vant-react-native

```

Or

```sh

npm install vant-react-native

```

## Usage

```tsx

import React, { Component } from 'react';

import { View, Text, SafeAreaView, ScrollView } from 'react-native';

import { Icon } from 'vant-react-native';

type IconNameType = React.ComponentProps['name'];

export default class IconList extends Component {

  render() {

    return (

      

        

          

            {data.map((item, index) => {

              const paddingLength = data.length % 4 || 4;

              return (

                

                  

                  {item}

                

              );

            })}

          

        

      

    );

  }

}

const data: IconNameType[] = [

  'location-o',

  'like-o',

  'star-o',

  'phone-o',

  'setting-o',

  'fire-o',

  'coupon-o',

  'cart-o',

  'shopping-cart-o',

  'cart-circle-o',

  'friends-o',

  'comment-o',

  'gem-o',

  'gift-o',

  'point-gift-o',

  'send-gift-o',

  'service-o',

  'bag-o',

  'todo-list-o',

  'balance-list-o',

  'close',

  'clock-o',

  'question-o',

  'passed',

];

```

## Debug

```sh

# 构建所有包

$ yarn build

# 调试要开发的包

$ yarn workspace @vant-react-natives/button run dev

```