Sử dụng Flex trong React Native

1. Khái niệm Flex

Khi component khai báo Flex = 1, thì component đó sẽ có kích thước full đầy component cha đang chứa nó.
Ví dụ

<View style={{flex:1,backgroundColor:black}}>
    <View style={{flex:1,backgroundColor:red}}></View>
    <View style={{flex:2,backgroundColor:blue}}></View>
</View>

View trên ta khai báo flex = 1 => View này sẽ có kích thước full màn hình của thiết bị
2 View còn lại có flex = 1 và flex = 2 là 2 View con. Vì thế View cha màu đen sẽ chia làm 3 phần, màu đỏ 1 phần, màu đen 2 phần

2. FlexDirection

Thay đổi hướng sắp xếp của các thành phần con trong thành phần cha
Sắp xếp theo hàng gọi là : row
Sắp xếp theo cột gọi là : column

3. justifyContent

Phân bổ các thành phần theo cùng 1 hướng, và theo trục chính của flex

flex-start (default): phân bổ theo hướng từ điểm bắt đầu đến điểm kết thúc

container: {
  flexDirection: 'row',
  justifyContent: 'flex-start'
}

center: phân bổ theo hướng nằm chính giữa

container: {
  flexDirection: 'row',
  justifyContent: 'center'
}

flex-end: phân bổ theo hướng từ điểm kết thúc đến điểm đầu

container: {
  flexDirection: 'row',
  justifyContent: 'flex-end'
},

space-around: phân bổ ngang hàng nhau

container: {
  flexDirection: 'row',
  justifyContent: 'space-around'
}

space-between: phân bố đều

container: {
  flexDirection: 'row',
  justifyContent: 'space-between'
}

4. AlignItems

Sẽ căn vị trí tương đối của các đối tượng con theo trục còn lại (khác trục chính). Ví dụ hướng sắp xếp của trục chính theo flex là row thì hướng sắp xếp còn lại sẽ là theo column

flex-start (default): các thành phần con sẽ đặt từ đầu đến cuối

container: {
  flexDirection: 'row',
  justifyContent: 'space-between',
  alignItems: 'flex-start'
}

center: ở trung tâm

container: {
  flexDirection: 'row',
  justifyContent: 'space-between',
  alignItems: 'center'
}

flex-end: các thành phần con sẽ đặt từ dưới lên trên

container: {
  flexDirection: 'row',
  justifyContent: 'space-between',
  alignItems: 'flex-end'
}

stretch: các thành phần con sẽ tự động con giãn lấp đầy

5. Ví dụ để hiểu hơn về FlexBox trong React Native

Khi sử dụng flexbox, chúng ta có thể sắp xếp các children của container theo 2 chiều là:
vertically (chiều dọc) và horizontally (chiều ngang)

Mặc định, mặc định các thành phần children sẽ được sắp xếp theo chiều dọc. FlexDirection trong React-Native gọi là column. Nếu chúng ta sắp xếp các thành phần con theo chiều ngang chúng ta cần thay đổi FlextDirection là row

alt

Ví dụ trên hình chúng ta cùng tạo 1 toolbar. Toolbar này sẽ có 1 button ở bên phải, 1 button Add ở bên trái và 1 title ở chính giữa

'use strict';

var React = require('react-native');
var {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Component
} = React;
  
class ReactLayouts extends Component{
    render() {
        return (
          <View>
                <View style={styles.toolbar}>
                    <Text style={styles.toolbarButton}>Add</Text>
                    <Text style={styles.toolbarTitle}>This is the title</Text>
                    <Text style={styles.toolbarButton}>Like</Text>
                </View>
            </View>
        );
    }
}
  
var styles = StyleSheet.create({

});
    
AppRegistry.registerComponent('ReactLayouts', () => ReactLayouts);

Trong code trên, trong render method chúng ta có 1 container với 1 style gọi là toolbar. Bên trong container này chúng ta có 3 Component Text khác nhau. Như code trên chưa định nghĩa style thì 3 thành phần sẽ hiển thị theo chiều dọc theo vị trí từ trên xuống dưới. Tuy nhiên, cái mà chúng ta cần là hiển thị 3 thành phần đó theo chiều ngang bằng nhau. Và title text sẽ linh hoạt co giãn theo kích thước màn hình.

Để sắp xếp phân bổ 3 thành phần text bên trên theo chiều ngang, chúng ta cần định nghĩa thuộc tính flexDirection trong toolbar container

var styles = StyleSheet.create({
    toolbar:{
        backgroundColor:'#81c04d',
        paddingTop:30,
        paddingBottom:10,
        flexDirection:'row'    //Step 1
    },
    toolbarButton:{
        width: 50,            //Step 2
        color:'#fff',
        textAlign:'center'
    },
    toolbarTitle:{
        color:'#fff',
        textAlign:'center',
        fontWeight:'bold',
        flex:1                //Step 3
    }
});

Ba bước như sau:

Bước 1: Thay đổi flexDirection ở Component cha. Trong trường hợp này, các thành phần con bên trong sẽ hiển thị theo chiều ngang
Bước 2: Set chiều rộng của button. Bước này không cần thiết nhưng nếu chúng ta không fixed width của button thì mặc định width của text sẽ được tự động set
Bước 3: Set title hiển thị linh hoạt. Nghĩa là nó sẽ tận dùng hết khoảng trống có thể sử dụng. Điều này là cần thiết khi ta xoay điện thoại sang chiều ngang hoặc chiều dọc

Kết quả sẽ như sau:

alt

Khi thay đổi chiều của simulator hoặc thiết bị di động thật, chúng ta sẽ thấy container sẽ tự co giãn và text cũng co giãn để phù hợp với kích thước màn hình.

Bây giờ chúng ta thử thêm một vài nội dung dưới phần toolbar. Chúng ta cần thêm 1 container, và mở rộng nó để nó chiếm hết những khoảng trống còn lại theo chiều dọc. Để thêm 1 container mới. Ta sửa 1 chút ở render method

render() {
    return (
        <View style={styles.mainContainer}>     //Step 1
            <View style={styles.toolbar}>
                ...
            </View>
            <View style={styles.content}>            //Step 2
                <Text>This is the content</Text>
            </View>
        </View>
    );
}

Bước 1: Thêm 1 style mới đặt tên là mainContainer. Chúng ta cần mở rộng container này để nó có thể full screen
Bước 2: Định nghĩa một nội dung mới. Trong trường hợp này, View sẽ chứa Text bên trong.

Style sẽ thêm như sau:

var styles = StyleSheet.create({
    ...
  
    mainContainer:{
        flex:1                  //Step 1
    },
    content:{
        backgroundColor:'#ebeef0',
        flex:1                //Step 2
    }
});

Bước 1: flex = 1, sẽ làm thằng cha có nội dung lấp đầy thiết bị device, theo cách này component này sẽ chiếm hết chiều cao có sẵn của thiết bị. Điều này rất tiện dụng khi ta thay đổi chiều của thiết bị
Bước 2: Định nghĩa nội dung làm sao để có thể hiển thị một cách linh hoạt. Chúng ta sẽ set background cho phân vùng content này để nhận thấy sự thay đổi.

alt

Ảnh bên trái, phần content không hiển thị linh hoạt, vì thế chiều cao của content chính là chiều cao của nội dung nó chứa. Ảnh bên phải, nội dung được hiển thị linh hoạt, chiều cao sẽ được điều chỉnh để sử dụng tất cả những khoảng trống cột có sẵn. Vì thế, điều này rất dễ dàng để có thể làm một container flexiable trong React Native

Link tham khảo

Tìm hiểu về Style, Height & Width và điều chỉnh Layout với Flexbox

Flex và FlexBox trong React Native

React Native Layout System