样式和Flex学习材料

发布时间 2023-06-05 02:59:56作者: Ben002

React Native 的样式其实很简单,所有的核心样式在的源码中只有 1 份声明文件

StyleSheetTypes:https://github.com/facebook/react-native/blob/8bd3edec88148d0ab1f225d2119435681fbbba33/Libraries/StyleSheet/StyleSheetTypes.js

这一份声明文件对应的是官网的 6 篇文档:

View Style Props:https://reactnative.dev/docs/view-style-props

Text Style Props:https://reactnative.dev/docs/text-style-props

Image Style Props:https://reactnative.dev/docs/image-style-props

Layout Props:https://reactnative.dev/docs/layout-props

Shadow Props:https://reactnative.dev/docs/shadow-props

Transforms:https://reactnative.dev/docs/transforms

 

Flex 学习材料:Yoga 官网提供了 Flex 弹性盒子布局的在线试用应用

Playground:https://yogalayout.com/playground/

你可以动手把玩一下。React Native 官网也为你提供了沙盒环境的相关

Demo:https://reactnative.dev/docs/flexbox

 

 

最基础的样式管理方案:https://reactnative.dev/docs/stylesheet

业内主流的方案:

https://styled-components.com/

https://tailwindcss.com/

虽然是源自浏览器的 CSS 管理方案,但也可以在 React Native 中使用。