react-native-responsive-ui - GitLite

KO | EN

gitlite — search

#javascript #react #llm #go #android #machine-learning #docker #macos #nodejs #windows #awesome #ios #openai #open-source

react-native-responsive-ui

(★ 623)

Building responsive UIs in React Native.

파일 탐색기

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

- config.yml
- .gitignore
- commit-msg
- pre-commit
- - App.tsx
- app.json
- babel.config.js
- index.js
- metro.config.js
- package.json
- webpack.config.js
- bootstrap.js
- - MediaQuery.test.tsx
  - ResponsiveComponent.test.tsx
  - setup.ts
  - useDimensions.test.tsx
  - useStylesheet.test.tsx
- index.ts
- MediaQuery.tsx
- ResponsiveComponent.tsx
- useDimensions.ts
- useStylesheet.ts
.eslintrc
.gitattributes
.gitignore
.yarnrc
babel.config.js
CONTRIBUTING.md
LICENSE
package.json
README.md
tsconfig.build.json
tsconfig.json
yarn.lock

# 설치 가이드

1. 코드 내려받기

git clone https://github.com/oceanbit/react-native-responsive-ui

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

cd react-native-responsive-ui

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

2. Node.js

쉬움 추천

사전 준비물

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

npm install react-native-responsive-ui --save

package.json에 명시된 라이브러리들을 내려받아 설치합니다.

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

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

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# React Native Reponsive UI

[![CircleCI](https://circleci.com/gh/wcandillon/react-native-responsive-ui.svg?style=svg)](https://circleci.com/gh/wcandillon/react-native-responsive-ui)
[![npm version](https://badge.fury.io/js/react-native-responsive-ui.svg)](https://badge.fury.io/js/react-native-responsive-ui)

Building responsive UIs in React Native.

![example](https://raw.githubusercontent.com/wcandillon/react-native-responsive-ui/4637085802323386110a6352929147d11e1ca83c/example/components/images/example.gif)

An example is available via expo [here](https://expo.io/@wcandillon/react-native-responsive-ui).

## Installation

```bash
npm install react-native-responsive-ui --save
```

## Usage

The `MediaQuery` component renders its children only if the query evaluates to true (see list of properties below).
This component listens to changes in the window dimensions.
In the example below, we render the `Logo` component if the window's height has a minimum size of `450dp` and if the device orientation is in portrait mode (height is larger than width).

### Media Queries

```jsx
// @flow
import React, {Component} from "react";
import {View} from "react-native";
import {MediaQuery} from "react-native-responsive-ui";

export default class Login extends Component {
    render(): React$Element<*> {
        return <View>
            <MediaQuery minHeight={450} orientation="portrait">
                <Logo />
            </MediaQuery>
        </View>;
    }
}

```

#### Properties

| Name           | Type   | Description                                                                          |
|----------------|--------|--------------------------------------------------------------------------------------|
| minHeight      | dp     | Minimum height of the window.                                                        |
| maxHeight      | dp     | Maximum height of the window.                                                        |
| minWidth       | dp     | Minimum width of the window.                                                         |
| maxWidth       | dp     | Maximum width of the window.                                                         |
| minAspectRatio | number | Minimum aspect ration of the window (ratio of horizontal pixels to vertical pixels). |
| maxAspectRatio | number | Maximum aspect ration of the window (ratio of horizontal pixels to vertical pixels). |
| minPixelRatio  | number | Minimum device pixel density. See [PixelRatio](https://facebook.github.io/react-native/docs/pixelratio.html). |
| maxPixelRatio  | number | Maximum device pixel density. See [PixelRatio](https://facebook.github.io/react-native/docs/pixelratio.html). |
| orientation    | `portrait` or `landspace` | Indicates whether the viewport is in landscape (the display is wider than it is tall) or portrait (the display is square or taller than it is wide) mode. |
| platform       | string | Platform of the device.  See [Platform](https://facebook.github.io/react-native/docs/platform-specific-code.html#platform-module). |
| condition      | boolean | Abritrary boolean value that must be true for the media query to pass. |

### useDimensions

```jsx
import React from "react";
import {useDimensions} from "react-native-responsive-ui";

export default ({ children }) =>  {
  const {width, height} = useDimensions();
  console.log(`New window dimensions: ${width}x${height}`);
  return children;
};
```

### useStylesheet

```jsx
import React from "react";
import {useStylesheet} from "react-native-responsive-ui";

export default class Buttons extends ResponsiveComponent {
    render() {
        const style = useStylesheet(staticStyle)
        return <View style={style.btns}>
            <Button label="Login" primary style={style.btn} />
            <Button label="Sign Up" style={style.btn} />
        </View>;
    }
}

const staticStyle = [
  {
      query: { orientation: "landscape" },
      style: {
          btns: {
              flexDirection: "row"
          },
          btn: {
              flex: 1
          }
      }
  },
  {
      query: { orientation: "portrait" },
      style: {
          btns: {
              alignSelf: "stretch"
          },
          btn: {
              flex: 0
          }
      }
  }
];
```

### Media Query

`mediaQuery()` evaluates a media query and return true or false.
See example below.

```jsx
import {mediaQuery, useDimensions} from "react-native-responsive-ui";

const {width, height} = useDimensions();
mediaQuery({ orientation: "portrait", minHeight: 450 }, width, height)
```

### ResponsiveComponent

`ResponsiveComponents` extends `React.Component` and add the window dimensions to the state of the component.

```jsx
import React from "react";
import {ResponsiveComponent} from "react-native-responsive-ui";

export default class Debug extends ResponsiveComponent {
    render() {
        const {width, height} = this.state.window;
        console.log(`New window dimensions: ${width}x${height}`);
        return null;
    }
}
```

### getStylesheet

```jsx
import React from "react";
import {ResponsiveComponent, getStylesheet} from "react-native-responsive-ui";

export default class Debug extends ResponsiveComponent {
    render() {
        const {width, height} = this.state.window;
        const styles = [
            {
                query: { minHeight: 500 },
                style: { container: { backgroundColor: "red" } }
            }
        ];
        const style = getStylesheet({width, height}, styles)
        return <View style={style.container} />
    }
}
```