Chắc mọi người đều biết khi nhắc tới Autolayout thì mọi người sẽ biết đến trong lập trình ios và android về căn chình giao diện ứng dụng theo mọi kích thước màn hình thiết bị một cách chuẩn xác nhất. React Native cũng như vậy, hỗ trợ cho chúng ta trong việc căn chỉnh giao diện co hoặc giãn và tinh chỉnh sao cho phù hợp với từng kích thước màn hình khác nhau.
Trong bài này chung ta cùng nhau tìm hiểu kỹ về flex trong react native và tầm quan trọng của nó không khác gì so với AutoLayout của android và ios. Flex là một trong thuộc tính của StyleSheet trong CSS sẽ hỗ trợ cho chúng ta trong việc xây dựng giao diện ứng dụng React Native.
2.Tìm hiểu flex trong react native
Flex là gì?
Flex được xác định là độ dài cũng như việc co giãn kích thước hợp lý, của một hàng hay một cột đối tượng này so với các đối tượng khác ở bên trong cùng của thằng bao đầu tiên của nó.
Thuộc tính flex:
Thuộc tính flex gồm có các giá trị:
flex-grow
flex-shrink
flex-basis
Lưu ý:Thông thường các giá trị trên thường có giá trị bằng 1, khi thiết kế giao diện cho ứng dụng chúng ta sẽ dùng giá trị này để chia tỉ lệ cho đối tượng này so với đối tượng khác.
Để sử dụng flex theo dạng cột (column) hay theo hàng (row) thì view bao bên ngoài của nó sẽ là flexDirection:‘row’ || ‘coloum’ và mặc định nếu chúng ta không chia là coloumn
3.Ứng dụng
Bước 1: Chúng ta tiến hành import thư viện của flex, và styleSheet. Vì thế các thuộc tính như Text, View, StyleSheet luôn lôn phải có.
Ban xem ví dụ bên dưới nhé.
?
12345678
<span style="font-size:16px;">import React, { Component } from 'react';import {AppRegistry,StyleSheet,Text,View} from 'react-native';</span>
Bước 2: TIến hành tạo giao diện cho View bao bên ngoài
Trong đoạn code bên dưới sẽ có một View bao bên ngoài và bên trong của nó gồm nhiều đối tượng khác nhau.
?
1234567891011
<span style="font-size:16px;">class flex_reactnative extends Component{render(){return(<View style={tên_biến.tên đối tượng}><View style={tên_biến.tên đối tượng1}> </View><View style={tên_biến.tên đối tượng2}> </View><View style={tên_biến.tên đối tượng n}> </View></View>);}}</span>
Ví dụ đoạn code:
?
1234567891011
<span style="font-size:16px;">classflex_reactnative extends Component{render(){return(<View style={style.baocha}><View style={style.bao doi tuong 1}> </View><View style={style.bao doi tuong 2}> </View><View style={style.bao doi tuong n}> </View></View>);}}</span>
Khi chạy máy ảo genymotion bạn thấy rằng View 1 và View 2 nằm hàng dọc vì chúng ta đã set flex =1 nên chúng sẽ tự co giãn màn hình và 2 VIew này chúng cũng tỷ lệ 1:1 và mặc định nếu không khai báo flexDirection thì mọi đối tượng sẽ nằm dọc.
Bây giờ chúng ta thử thay đổi kích thước flex thì xem thế nào nhé.
Ở phần trên chúng ta đã tìm hiểu flex là gì, trong flex mình có nhắc đến flexDirection là gì đúng không, bây giờ chúng ta thử thêm thuộc tính flexDirection xem nó như thế nào nhé.
