ScrollView'da bileşen çubuğu aşağıya doğru nasıl yapılır, ancak yine de aşağı doğru itmek için diğer içerikler açılır

Question

Üç görünümüm var: biri üstten, orta ve altta. Kaydırma görünümü tüm ekranı alır. Sorun şu ki, kaydırma görünümü kaydırılabilir değil.

<ScrollView contentContainerStyle={{flex: 1, backgroundColor: '#00ff00', flexDirection: 'column', justifyContent: 'space-between'}}> 
    <View><SomeContent /></View> 
    <View><SomeContent /></View> 
    <View><SomeContent /></View> 
</ScrollView> 

Ben flex: 1 kaydırma görünümü ekranın yaklaşık% 50'sini alır kaldırırsanız. Görüntü körükünde olduğu gibi üst, orta ve alt elemanlarla kaydırma görünümünü nasıl yaparım.

alt eleman altta her zaman olmalı ama üst iki bileşenin yüksekliği büyük olduğunda onlar alt bileşeni aşağı itmek gerekir bu yüzden aşağı/yukarı hareket etmek için kaydırma görünümünü kullanabilirsiniz.

Answer 1

Flex yerine flexGrow kullanın. Örnek kod verilmiştir. 1, Views'tan için yalnızca tam yükseklikte görüyoruz:

<ScrollView contentContainerStyle={{ flexGrow: 1, flexDirection: 'column', justifyContent: 'space-between'}}> 
    <View style={{ width: 50, height: 1000, backgroundColor:'orange' }} /> 
    <View style={{ width: 50, height: 50, backgroundColor:'black'}} /> 
    <View style={{ width: 50, height: 50, backgroundColor:'blue'}} /> 
</ScrollView> 

İşte bir ekran esnek kaldırarak

Answer 2

olduğunu.

<ScrollView contentContainerStyle={{ backgroundColor: '#00ff00', 
     flexDirection: 'column', justifyContent: 'space-between' }}> 
    <View style={{ width: 100, height: 100, backgroundColor:'#b0e0e6' }} /> 
    <View style={{ width: 100, height: 100, backgroundColor:'#87ceeb'}} /> 
    <View style={{ width: 100, height: 100, backgroundColor:'#4682b4'}} /> 
    </ScrollView> 

flex ayarlarsanız: 1 veya flexGrow: 1, scrollview ekranın yüksekliğine dk yüksekliğini ayarlar.

Görünümler kümülatif yüksekliği bu büyükse

<ScrollView contentContainerStyle={{ flex: 1, backgroundColor: '#00ff00', 
     flexDirection: 'column', justifyContent: 'space-between' }}> 
    <View style={{ width: 100, height: 100, backgroundColor:'#b0e0e6' }} /> 
    <View style={{ width: 100, height: 100, backgroundColor:'#87ceeb'}} /> 
    <View style={{ width: 100, height: 100, backgroundColor:'#4682b4'}} /> 
    </ScrollView> 

genel görünümü ekranın yüksekliği ötesine taşacak. Bu durumda flexGrow: 1 (aşağıda kısaca kaydırılır) içeriğe ilerlemenizi sağlar, ancak flex: 1 keser.

<ScrollView contentContainerStyle={{ flexGrow: 1, backgroundColor: '#00ff00', 
     flexDirection: 'column', justifyContent: 'space-between'}}> 
    <View style={{ width: 100, height: 700, backgroundColor:'#b0e0e6' }} /> 
    <View style={{ width: 100, height: 100, backgroundColor:'#87ceeb'}} /> 
    <View style={{ width: 100, height: 100, backgroundColor:'#4682b4'}} /> 
    </ScrollView> 

Oradan, boşluk İzlenim doldurulacaktır nasıl ağırlık Görünümler her birinde esnek ayarlayabilirsiniz. Örneğin, en üstteki iki Görünümün her birinde esnek: 1'i ayarlarsanız ve alt Görünüm'de 2: 2'yi ayarlarsanız, içerik yüksekliğini hesapladıktan sonra , alt görünüme toplam yüksekliğin 1/2'i verilir. En iyi iki Görüntülemenin her biri için 1/4. Şunun gibi:

<ScrollView contentContainerStyle={{ flexGrow: 1, backgroundColor: '#00ff00', 
     flexDirection: 'column', justifyContent: 'space-between'}}> 
    <View style={{ flex: 1, width: 100, height: 100, backgroundColor:'#b0e0e6' }} /> 
    <View style={{ flex: 1, width: 100, height: 100, backgroundColor:'#87ceeb'}} /> 
    <View style={{ flex: 2, width: 100, height: 100, backgroundColor:'#4682b4'}} /> 
    </ScrollView> 

scrollview belgeleri: https://facebook.github.io/react-native/docs/scrollview.html