
上QQ阅读APP看书,第一时间看更新
There's more...
There are some differences between how flexbox works in React Native and how it works in CSS. First, the default flexDirection property in CSS is row, whereas the default flexDirection property in React Native is column.
The flex property also behaves a bit differently in React Native. Instead of setting flex to a string value, it can be set to a positive integer, 0, or -1. As the official React Native documentation states:
When flex is a positive number, it makes the component flexible and it'll be sized proportional to its flex value. So, a component with flex set to 2 will take twice the space as a component with flex set to 1. When flex is 0, the component is sized according to width and height and is inflexible. When flex is -1, the component is normally sized according width and height. However, if there's not enough space, the component will shrink to its minWidth and minHeight.
There's a lot more to talk about with flexbox, but for now we've gotten our feet wet. In Chapter 3, Implementing Complex User Interfaces – Part I, we'll learn more about layouts. we'll learn more about layouts, and we'll create a complex layout that uses more of the available layout properties.