akveo / akveo/react-native-ui-kitten
Could UI Kitten use StyleSheet.create to generate classes instead of inline styles on web?
- 主要语言
- 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:**

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:**

## 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 还没有评估数据。