Tôi muốn đặt một thanh màu trắng có thể lấy hết chiều rộng ở cuối màn hình. Để làm như vậy, tôi đã nghĩ về việc sử dụng định vị absolute
với thông số flexbox
được kế thừa.Tuyệt đối và Flexbox trong React Native
Với mã sau, mã sẽ hiển thị nội dung như this.
Đây là mã của tôi:
var NavigationBar = React.createClass({
render: function() {
return(
<View style={navigationBarStyles.navigationBar}>
//Icon 1, Icon 2...
</View>
);
}
});
var Main = React.createClass({
render: function() {
return(
<View style={mainStyles.container}>
<NavigationBar />
</View>
);
}
});
var mainStyles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#456783',
}
});
var navigationBarStyles = StyleSheet.create({
navigationBar: {
backgroundColor: '#FFFFFF',
height: 30,
position: 'absolute',
flexDirection: 'row',
bottom: 0,
justifyContent: 'space-between'
},
});
Tôi mới trong phong cách trong CSS và không phải tất cả các thuộc tính có sẵn trong Phản ứng-Native. Vì vậy, bất kỳ sự giúp đỡ được đánh giá cao, nhờ :)
Cám ơn đăng đó. Và nó có vẻ tương tự như chiều cao - thay vì 'chiều cao: 100%', làm 'top: 0, bottom: 0'. – Premasagar
nhưng nếu bạn muốn đặt thanh ở dưới cùng và chiều rộng đầy đủ, bạn nên thêm 'left: 0, right: 0' và không nên thêm' top: 0', nếu bạn đặt 'top: 0' và' bottom : 0', nó sẽ hiển thị toàn màn hình. –
Tôi có thể làm trung tâm như thế nào? Ví dụ tôi muốn hiển thị một spinner trên đầu trang của thành phần của tôi và tôi muốn spinner được tuyệt đối và trung tâm? –