Yerleşim görünümü, liste görünümünün en üstünde yer alıyor mu?

Question

Tam ekran listesi görünümü olan bir uygulamanız var. Üstte yeni bir görünüm hiyerarşisi eklemek istiyorum (liste görünümünü kısmen engeller ve yukarıda yüzer). Tweetbot gibi sırala, liste görünümünde katmanlar halinde açılan bir açılır kutu olarak hizmet edecektir.

Bunu başarmak için doğru oluşturma kodunu anlayamıyorum. Hem ListView hem de kayan görünümde onları katmanlandırmak için mutlak konuma getirebildim, ancak ListView'i tam ekrana (flex: 1) nasıl genişleteceğimi ve üstte yüzen kutuyu nasıl çıkaracağımı anlayamıyorum.

Answer 1

Bu yazı için basit bir örnek oluşturduktan sonra bunu anladım. Aşağıdaki işler başka bir yere bir görünüm yüzer:

'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; 

Ne yapmaya çalışıyordum başka bir özel sınıf yüzer, bu yüzden hale kod yerini w aşağıdaki /: etmedi

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> 
     ); 
    }, 
}); 

iş. Bu arada, "DropDown" ifadem sadece içindeki bir Metin ile bir Görünüm döndürüyor. Ancak aşağıdakileri yapmak işe yaramıyor:

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> 
     ); 
    }, 
});