2015-04-09 43 views
43

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ờ :)

Trả lời

74

Ok, giải quyết vấn đề của tôi, nếu có ai đang đi ngang qua đây là câu trả lời:

Chỉ cần có thêm left: 0,top: 0, đến phong cách, và vâng, tôi là mệt mỏi.

position: 'absolute', 
left:  0, 
top:  0, 
+6

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

+2

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. –

+1

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? –

34

Bước đầu tiên sẽ có thêm

position: 'absolute', 

sau đó nếu bạn muốn các yếu tố toàn bộ chiều rộng, thêm

left: 0, 
right: 0, 

sau đó, nếu bạn muốn đặt phần tử ở phía dưới , thêm

bottom: 0, 
// don't need set top: 0 

nếu bạn muốn để xác định vị trí các phần tử ở đầu trang, thay thế bottom: 0 bởi top: 0

0

Giải pháp này làm việc cho tôi:

tabBarOptions: { 
     showIcon: true, 
     showLabel: false, 
     style: { 
     backgroundColor: '#000', 
     borderTopLeftRadius: 40, 
     borderTopRightRadius: 40, 
     position: 'relative', 
     zIndex: 2, 
     marginTop: -48 
     } 
    } 
+0

Một số mã khối mã thực sự ngăn nắp điều này! –

Các vấn đề liên quan