Chế độ xem lớp phủ ở đầu chế độ xem danh sách?

Question

Tôi có một ứng dụng có chế độ xem danh sách toàn màn hình. Tôi muốn thêm một hệ thống phân cấp khung nhìn mới lên trên (nó sẽ chặn một phần khung nhìn danh sách và nổi lên trên). Sắp xếp giống như Tweetbot, nó sẽ đóng vai trò như một hộp thông báo thả xuống nằm trên màn hình danh sách.

Tôi không thể tìm ra mã kết xuất phù hợp để đạt được điều này. Tôi đã có thể thiết lập vị trí tuyệt đối trên cả ListView và chế độ xem nổi để lớp chúng, nhưng không thể tìm ra cách mở rộng ListView thành toàn màn hình (flex: 1) và có hộp nổi ở trên cùng.

Answer 1

Vì vậy, tôi nghĩ rằng tôi đã tìm ra điều này sau khi soạn một ví dụ đơn giản cho bài đăng này. Các công trình sau để nổi một cái nhìn khác hơn:

'use strict'; 

var React = require('react-native'); 

var { 
    AppRegistry, 
    StyleSheet, 
    View, 
} = React; 

var styles = StyleSheet.create({ 
    fullScreen: { 
     flex:1, 
     backgroundColor: 'red', 
    }, 
    floatView: { 
     position: 'absolute', 
     width: 100, 
     height: 100, 
     top: 200, 
     left: 40, 
     backgroundColor: 'green', 
    }, 
    parent: { 
     flex: 1, 
    } 
}); 


var Example = React.createClass({ 

    render: function() { 

     return (
      <View style={styles.parent}> 
       <View style={styles.fullScreen}/> 
       <View style={styles.floatView}/>{/* WORKS FOR REGULAR VIEW */} 
      </View> 
     ); 
    }, 


}); 

module.exports = Example; 

Những gì tôi đang cố gắng làm là nổi khác lớp tùy chỉnh, vì vậy tôi thay thế đoạn code làm w/sau:

var Example = React.createClass({ 
    render: function() { 

     return (
      <View style={styles.parent}> 
       <View style={styles.fullScreen}/> 
       <DropDown style={styles.floatView}/>{/* DOES NOT WORK FOR CUSTOM VIEW */} 
      </View> 
     ); 
    }, 
}); 

Đó không công việc. Nhân tiện, "DropDown" của tôi chỉ trả về một View với một số Text trong đó. Nhưng thực hiện các thao tác sau:

var Example = React.createClass({ 

    render: function() { 

     return (
      <View style={styles.parent}> 
       <View style={styles.fullScreen}/> 
       <View style={styles.floatView}>{/* WORKS FOR CUSTOM VIEW */} 
        <DropDown /> 
       </View> 
      </View> 
     ); 
    }, 
});