# rn-darkly

> 对 react-native 组件进行暗黑模式封装

Latest version **2.1.0** (published 2022-07-09) · 0 weekly downloads

## Install

```sh
npm install rn-darkly
pnpm add rn-darkly
yarn add rn-darkly
bun add rn-darkly
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.1.0 |
| Published | 2022-07-09 |
| First published | 2021-07-17 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 18.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | liuyunjs |

## Links

- npm: https://www.npmjs.com/package/rn-darkly
- npm.io page: https://npm.io/package/rn-darkly

## Dependencies (2)

- [hoist-non-react-statics](https://npm.io/package/hoist-non-react-statics.md) ^3.3.2
- [@types/hoist-non-react-statics](https://npm.io/package/@types/hoist-non-react-statics.md) ^3.3.1

## Recent versions

- 2.1.0 (latest) — 2022-07-09
- 2.0.0 — 2022-05-28
- 1.0.3 — 2021-08-11
- 1.0.2 — 2021-08-11
- 1.0.1 — 2021-08-11
- 1.0.0 — 2021-08-11
- 0.0.8 — 2021-07-28
- 0.0.7 — 2021-07-28
- 0.0.6 — 2021-07-17
- 0.0.5 — 2021-07-17
- 0.0.4 — 2021-07-17
- 0.0.3 — 2021-07-17
- 0.0.2 — 2021-07-17
- 0.0.1 — 2021-07-17

## README

# rn-darkly

对 react-native 组件进行暗黑模式封装

1. 支持 useColorScheme api 自动切换为暗黑模式，在不支持此 api 的版本降级为非暗黑模式，但依旧可以手动设置强制暗黑模式/非暗黑模式
2. 支持设置暗黑模式样式
3. 支持强制暗黑模式/非暗黑模式
4. 支持配置全局强制暗黑模式/非暗黑模式

## install

### npm
```shell
npm install rn-darkly --save
```
### yarn
```shell
yarn add rn-darkly
```

## 示例
```typescript jsx
import React, { useState } from 'react';
import {
  DarklyText,
  DarklySafeAreaView,
  DarklyScrollView,
  DarklyTouchableHighlight,
  DarklyProvider,
  DarklyStatusBar,
} from 'rn-darkly';

export default function App() {
  const [forceDark, setForceDark] = useState(false);

  return (
    // 外层包裹 DarklyProvider
    <DarklyProvider forceDark={forceDark}>
      <DarklyStatusBar barStyle="dark-content" dark_barStyle="light-content" />
      <DarklyScrollView
        contentContainerStyle={{ backgroundColor: '#fafafa', flex: 1 }}
        dark_contentContainerStyle={{ backgroundColor: '#000' }}>
        <DarklySafeAreaView>
          <DarklyTouchableHighlight
            onPress={() => setForceDark(!forceDark)}
            style={{ height: 50 }}
            dark_underlayColor="#eee"
            underlayColor="#000">
            <DarklyText
              style={{ fontSize: 20, color: '#333' }}
              dark_style={{ color: '#fff' }}>
              DarklyText
            </DarklyText>
          </DarklyTouchableHighlight>
        </DarklySafeAreaView>
      </DarklyScrollView>
    </DarklyProvider>
  );
}
```

## darkly
*高阶组件，使一个普通组件支持暗黑模式*
### 示例
```typescript jsx
// 第一个参数就是要支持暗黑模式的组件
// 是否参数就是这个组件要支持暗黑模式的属性的key
// 如果是以style结尾(barStyle除外，StatusBar的barStyle不是样式)，会被认为是样式，其余就任务是普通属性
// 样式会以数组形式往下传递
// 例如默认情况下，我们设置的 style 是 {width: 100, backgroundColor: '#fff'} dark_style 是 {backgroundColor: '#000'}
// 这时实际传入ScrollView的style会是 [{width: 100, backgroundColor: '#fff'},{backgroundColor: '#000'}]
// 如果不是以style结尾，就会被替换掉
const DarklyScrollView = darkly(ScrollView, 'style', 'contentContainerStyle');
```

## Props

### DarklyProvider

| 名称                    |          默认值          |                                      类型                                       | 描述                                                         |
| ----------------------- | :----------------------: | :-----------------------------------------------------------------------------: | :----------------------------------------------------------- |
| forceDark                 |           -           |                                     boolean                                     | 强制设置全局暗黑模式/非暗黑模式                                               |
| children                |            -             |                               React.ReactNode                                | 要展示的组件                                                 |

---



### DarklyComponent 
*例如 DarklyScrollView*

| 名称                    |          默认值          |                                      类型                                       | 描述                                                         |
| ----------------------- | :----------------------: | :-----------------------------------------------------------------------------: | :----------------------------------------------------------- |
| forceDark                 |           -           |                                     boolean                                     | 强制设置暗黑模式/非暗黑模式                                               |
| dark_style                |            -             |                               StyleProp<ViewStyle>                                | 暗黑模式样式                                               |
| dark_contentContainerStyle                |            -             |                               StyleProp<ViewStyle>                                | 暗黑模式样式                                               |


*例如 DarklyView*

---
_Source: https://npm.io/package/rn-darkly · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._