akveo / akveo/react-native-ui-kitten

Could UI Kitten use StyleSheet.create to generate classes instead of inline styles on web?

未关闭
#1,266 9 条评论 0 个 reaction 已指派 0 人 在 GitHub 查看
:bulb: Proposal
主要语言
TypeScript
星标
10.7k
派生
962
PR 合并指标
30 天内没有已合并 PR

描述

## 💬 Question

Could UI Kitten use `StyleSheet.create` to generate the style objects inside the render methods when new eva styles are received from the higher order `styled` component?

If so, expo web/react-native-web would generate atomic css classes instead of redundant inline styles, which is what currently happens because UI kitten does not use the `StyleSheet.create` api to generate the style objects that get set as the style prop on react-native primitives (inspect any example from docs to see inline styles). This is suboptimal for web output, because if you have 20 UI kitten buttons on a page, you get all the styles repeated inline 20 times. If the `StyleSheet.create` api was used, all 20 would reference the same atomic css classes for each style rule. However, there may be performance implications of using `StyleSheet.create` in render functions that I'm not considering, so that's why I submitted a Question instead of a Feature Proposal.

### Example

This generates inline styles on react-native-web:

```jsx
const CustomElement = (props) => {
const container = {
backgroundColor: "green",
width: 200,
height: 200,
color: "#fff",
};
return some element;
};
```

**Output:**

![inlinestyles](https://user-images.githubusercontent.com/36276352/95880921-06ed0300-0d46-11eb-965d-54ef75170381.png)

This generates atomic css classes because it uses the `StyleSheet.create` api:

```jsx
const CustomElement = (props) => {
const styles = StyleSheet.create({
container: {
backgroundColor: "green",
width: 200,
height: 200,
color: "#fff",
},
});
const { container } = styles;
return some element;
};
```

**Output:**

![atomiccss](https://user-images.githubusercontent.com/36276352/95880955-0ce2e400-0d46-11eb-8726-dc2f66db876a.png)

## Code Change

I believe making this change would involve updating all the `getComponentStyle` methods to call `StyleSheet.create` instead of returning a regular object:

https://github.com/akveo/react-native-ui-kitten/blob/cacd67cb5ac0303eb9179e24607e695b58f012dd/src/components/ui/button/button.component.tsx#L167-L183

## UI Kitten and Eva version

| Package | Version |
| ----------- | ----------- |
| @eva-design/eva | 2.0.0 |
| @ui-kitten/components | 5.0.0 |

贡献指南

打开贡献指南

评估

这个 Issue 还没有评估数据。

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。