Cách sử dụng Flexbox trong React Native
Flexbox là một công cụ CSS cho phép bạn xây dựng bố cục một chiều linh hoạt. Nó cho phép bạn kiểm soát vị trí của các phần tử trong vùng chứa để bạn có nhiều quyền kiểm soát hơn đối với việc trình bày nội dung của mình trên màn hình.
Hướng dẫn này trình bày cách sử dụng flexbox trong React Native để xây dựng bố cục linh hoạt và đáp ứng. Bạn sẽ tìm hiểu cách định vị các mục con của phần tử vùng chứa bằng thuộc tính flexbox.
Mục Lục
So sánh hành vi Flexbox trong React Native và Web Development
Nếu bạn muốn tổ chức nội dung của phần tử vùng chứa bằng cách sử dụng flexbox trong CSS đơn giản, bạn cần sử dụng hiển thị: uốn cong tài sản.
container { display: flex; }
Nhưng với React Native, bạn không cần thiết lập hiển thị: uốn cong tài sản. Điều này là do React Native sử dụng flexbox theo mặc định để xây dựng bố cục.
Dưới đây là một số điểm khác biệt cần lưu ý về cách flexbox hoạt động khi được sử dụng để căn chỉnh các phần tử HTML trong ứng dụng web so với cách nó hoạt động trong React Native:
- flexDirection mặc định là hàng ngang trong các ứng dụng web nhưng mặc định là cột trong React bản địa.
- căn chỉnh nội dung mặc định là kéo dài trong các ứng dụng web và khởi động linh hoạt trong React bản địa.
- flexShrink mặc định là 1 trong web và 0 trong React Native.
Sử dụng thuộc tính Flexbox trong React Native
Các thuộc tính của Flexbox cho phép bạn mô tả cách căn chỉnh các phần tử con của phần tử chứa. Bạn cần hiểu các thuộc tính này để tạo các bố cục phức hợp phù hợp với nhu cầu của ứng dụng.
1. Sử dụng thuộc tính flex trong React Native
Các uốn cong tài sản xác định cách Xem thành phần lấp đầy màn hình. Thuộc tính này chấp nhận một giá trị số nguyên lớn hơn hoặc bằng 0. Giá trị này chỉ định phần của màn hình mà Xem thành phần nên chiếm.
Trong ví dụ này, bạn đang tạo một màn hình với một chế độ xem từ thư viện các thành phần React Native:
import React from "react"
import { StyleSheet, View } from "react-native"export default function App() {
return (
<>
<View style={{ backroundColor: "#A020F0", flex: 1}} />
</>
)
}
Đây là đầu ra:
Ở đây bạn đã chỉ định 1 là giá trị linh hoạt của Xem thành phần. Các Xem chiếm toàn bộ màn hình (100%) vì bạn đã chia không gian thành một nhóm.
Hãy xem một ví dụ khác:
import React from "react"
import { StyleSheet, View } from "react-native"export default function App() {
return (
<View>
<View style={{ backroundColor: "#A020F0", flex: 1}} />
<View style={{ backgroundColor: "#7cb48f", flex: 3 }} />
</View>
)
}
Đây là kết quả:
Ở đây bạn có hai Xem yếu tố bên trong khác Xem yếu tố. Đứa trẻ đầu tiên được đặt thành uốn cong: 1và thứ hai được đặt thành uốn cong:3. Những giá trị đó phân chia không gian giữa hai đứa trẻ. Cái đầu tiên chiếm 1/4 màn hình trong khi cái thứ hai chiếm 3/4 màn hình (Màn hình được chia thành 4 khối vì 1+3 = 4).
2. Sử dụng thuộc tính flexDirection trong React Native
Nếu bạn nhìn vào ảnh chụp màn hình ở trên, bạn sẽ thấy rằng các phần tử con nằm chồng lên nhau. Đây là hành vi mặc định của flexbox trong React Native (flexDirection mặc định là cột giá trị).
Bạn cũng có thể đặt flexDirection tài sản để hàng ngang, đảo ngược cộtVà đảo ngược hàng. Trong ví dụ sau, flexDirection được đặt thành hàng ngangdo đó các phần tử con được đặt cạnh nhau:
import React from "react"
import { StyleSheet, View } from "react-native"const styles = StyleSheet.create({
container: {
backgroundColor: "#00FF00",
flex: 1,
alignItems: "center",
flexDirection: "row",
},
square: {
backgroundColor: "#FF0000",
width: 98,
height: 98,
margin: 4,
},
});
export default function App() {
return (
<View style={styles.container}>
<View style={styles.square} />
<View style={styles.square} />
<View style={styles.square} />
</View>
)
}
Đây là kết quả:
thiết lập flexDirection ĐẾN đảo ngược hàng đặt những đứa trẻ cạnh nhau, nhưng nó đảo ngược thứ tự. Tương tự như vậy, các đảo ngược cột đặt những đứa trẻ chồng lên nhau nhưng theo trình tự ngược lại với trình tự được xác định bởi cột.
3. Sử dụng justifyContent trong React Native
Các biện minh cho nội dung căn chỉnh các phần tử con của hộp chứa flexbox dọc theo trục chính. Nếu flexDirection được đặt thành cột, thì trục sơ cấp là trục tung. Nếu nó được đặt thành hàng ngangthì nó nằm ngang.
Các giá trị có thể có của biện minh cho nội dung là khởi động linh hoạt, kết thúc uốn cong, trung tâm, không gian giữa, không gian xung quanhVà không gian đều.
Trong ví dụ sau, flexDirection được đặt thành hàng và biện minh cho nội dung được đặt thành khởi động linh hoạt:
import React from "react"
import { StyleSheet, View } from "react-native"const styles = StyleSheet.create({
container: {
backgroundColor: "#00FF00",
flex: 1,
justifyContent: "flex-start",
flexDirection: "row",
},
square: {
backgroundColor: "#FF0000",
width: 98,
height: 98,
margin: 6,
},
});
export default function App() {
return (
<View style={styles.container}>
<View style={styles.square} />
<View style={styles.square} />
<View style={styles.square} />
</View>
)
}
Đây là đầu ra:
Nếu bạn thay đổi flexDirection ĐẾN cột, khởi động linh hoạt sẽ áp dụng cho trục tung. Vì vậy, các hộp sẽ xếp chồng lên nhau.
Cài đặt biện minh cho nội dung vào giữa (trong khi trục sơ cấp là một cột) căn giữa ba hộp con.
4. Sử dụng alignItems trong React Native
Các căn chỉnh thuộc tính xác định vị trí của các mục trong hộp chứa flexbox dọc theo trục phụ. Điều này trái ngược với biện minh cho nội dung. Giống như biện minh cho nội dung quan tâm đến sự liên kết theo chiều dọc, căn chỉnh xử lý căn chỉnh ngang. Các giá trị có thể có của căn chỉnh là khởi động linh hoạt, kết thúc uốn cong, trung tâmVà đường cơ sở.
Trong ví dụ sau, flexDirection được đặt thành hàng ngang Và căn chỉnh được đặt thành khởi động linh hoạt:
import React from "react"
import { StyleSheet, View } from "react-native"const styles = StyleSheet.create({
container: {
backgroundColor: "#00FF00",
flex: 1,
alignItems: "flex-start",
flexDirection: "row",
},
square: {
backgroundColor: "#FF0000",
width: 98,
height: 98,
margin: 6,
},
});
export default function App() {
return (
<View style={styles.container}/>
<View style={styles.square} />
<View style={styles.square} />
<View style={styles.square} />
<View style={styles.square} />
</View>
)
}
Đây là đầu ra:
Nếu bạn đặt flexDirection tài sản để cột Và căn chỉnh ĐẾN trung tâmcác hộp sẽ được đặt chồng lên nhau và các phần tử con sẽ được căn giữa.
5. Sử dụng alignSelf trong React Native
Các sắp xếp chính mình thuộc tính xác định cách một đứa trẻ riêng lẻ sẽ tự căn chỉnh chính nó trong vùng chứa. Nó ghi đè căn chỉnhvà các giá trị có thể là khởi động linh hoạt, kết thúc uốn cong, trung tâmVà đường cơ sở.
Trong ví dụ sau, chúng tôi đặt mặc định căn chỉnh thuộc tính và ghi đè lên nó bằng cách sử dụng sắp xếp chính mình:
import React from "react"
import { StyleSheet, View } from "react-native"const styles = StyleSheet.create({
container: {
backgroundColor: "#00FF00",
flex: 1,
alignItems: "center",
justifyContent: "center",
flexDirection: "row",
},
square: {
backgroundColor: "#FF0000",
width: 98,
height: 98,
margin: 6,
},
});
export default function App() {
return (
<View style={styles.container}/>
<View style={styles.square} />
<View style={[styles.square, { alignSelf: "flex-end" }]} />
<View style={[styles.square, { alignSelf: "flex-start" }]} />
)
}
Đây là kết quả:
Thuộc tính Flexbox khác
Có hai thuộc tính khác mà bạn có thể sử dụng khi tạo bố cục flexbox trong React Native:
- flexWrap: Trong trường hợp các phần tử con của container tràn ra ngoài. Sử dụng flexWrap để chỉ định xem chúng nên được thu nhỏ trên một dòng hay được gói thành nhiều dòng. Các giá trị có thể cho flexWrap là bây giờ Và bọc.
- khoảng cách: Bạn sử dụng khoảng cách thuộc tính để thêm khoảng cách giữa các mục lưới trong vùng chứa. Giá trị của nó phải là kích thước của khoảng cách bạn muốn giữa các mục. Bạn có thể chỉ định khoảng cách thuộc tính bằng cách sử dụng các đơn vị CSS như px, em hoặc rem.
Tìm hiểu thêm về React Native
Bây giờ bạn đã hiểu flexbox và biết cách sử dụng nó trong ứng dụng React Native của mình để tạo bố cục linh hoạt và đáp ứng nhanh, đã đến lúc bạn tìm hiểu chi tiết về React Native.