ScrollView с flex 1 делает его незаметным

Я пытаюсь запустить flex на ScrollView, и пока ScrollView имеет flex: 1 прокрутка внутри не работает. вот скрипка expo (чтобы вы могли запускать этот код и играть с ним) https://snack.expo.io/SySerKNp-

обратите внимание, что если вы удалите flex: 1 из ScrollView, это позволит прокручивать, но затем вы теряете силу гибкости (возможность разрешить красной емкости дожать верхний ящик (ScrollView)), чтобы я должен иметь изгиб.

p.s - Я работаю только на Android, и я не тестировал его на iPhone (я не против результата там)

какая-нибудь идея, чего мне не хватает? почему ScrollView не будет функционировать правильно, если у него есть flex: 1? спасибо!

Ответ 1

Я считаю, что ваша проблема в том, что вы говорите ScrollView, чтобы занять все свободное пространство с помощью flex = 1, но дело в том, что ScrollView работает по-другому. Он автоматически отображает всех своих детей, чтобы он отличался от гибкого. Это отличие от обычного ListView или FlatList, которые имеют лучшую производительность.

Я считаю, что эта закуска решает эту проблему: https://snack.expo.io/SkxN9GOT-

В принципе, я получаю высоту устройства и устанавливаю ScrollView с фиксированной высотой на основе (screenHeight - текущая высота красного окна).

Ответ 2

Попробуйте использовать flexGrow: 1 вместо flex: 1 в стиле контейнера содержимого scrollView следующим образом.

<ScrollView contentContainerStyle={{ flexGrow: 1, borderColor: 'green', borderWidth: 5 }}>
  <View style={styles.box1} />
  <View style={styles.box2} />
  <View style={styles.box1} />
</ScrollView>

https://snack.expo.io/HkkEVoh6Z

Ответ 3

Попробуйте заменить contentContainerStyle на style. Я считаю, что вы ожидаете: https://snack.expo.io/S1CVrJYa-

Ответ 4

Этот ответ уже предоставлен, как это сделать.

Но вот объяснение, почему вы не можете сделать своим методом. Стили, указанные в contentContainerStyle,

применяется к контейнеру содержимого прокрутки, который обертывает все дочерние представления.

Поэтому, когда вы применяете flex: 1 к contentContainer, он занимает полную высоту ScrollView, высота которой также flex: 1 как ее родительский View.

Вы также можете имитировать -

возможность разрешить красной упаковке дожать верхний ящик

добавив родителя к ScrollView и применив стиль в родительском

<View style={styles.root}>
  <View style={{ flex: 1, borderColor: 'green', borderWidth: 5 }}>
    <ScrollView>
      <View style={styles.box1} />
      <View style={styles.box2} />
      <View style={styles.box1} />
    </ScrollView>
  </View>
  <View style={{ height: this.state.height, backgroundColor: 'red' }}>
    <TouchableOpacity onPress={() => this.setState({ height: this.state.height + 10 })}>
      <Text>Click</Text>
    </TouchableOpacity>
  </View>
</View>

Ответ 5

Попробуйте это, он будет 100% решить вашу проблему

import React, { Component } from 'react';
import { AppRegistry, View,ScrollView } from 'react-native';

export default class AlignItemsBasics extends Component {
  render() {
    return (
      // Try setting 'alignItems' to 'flex-start'
      // Try setting 'justifyContent' to 'flex-end'.
      // Try setting 'flexDirection' to 'row'.
      <View style={{ flex: 1,flexDirection: 'column' }}>
        <View style={{   height: 50, backgroundColor: 'powderblue'}} />
        <View style={{  flex: 1,  backgroundColor: 'skyblue'}} >
            <ScrollView>

<View style={{  flexDirection: 'column' , minHeight: 'fit-content'}} >
 <View style={{    height:150, backgroundColor: 'red'}} />
    <View style={{ minHeight: 'fit-content', backgroundColor: '#fe3222' }} />      

 <View style={{    height:150, backgroundColor: '#fff222'}} />
    <View style={{    height:150, backgroundColor: '#555222'}} />           
              </View>

  </ScrollView>
 </View>
      </View>
    );
  }
};

// skip this line if using Create React Native App
AppRegistry.registerComponent('AwesomeProject', () => AlignItemsBasics);

Ответ 6

Самое лучшее, что нужно сделать, это обернуть ScrollView в представлении и управлять этим представлением с помощью flex, после этого будет отображаться прокрутка.

Это небольшой пример

<View style={{flex: 1, flexDirection: 'column',}}>

          <View style={{flex:5, backgroundColor : 'green' }}>
            <ScrollView style={{margin:50, backgroundColor : 'pink' }}>

              <Text> Hello Scroll View </Text>
              <Text> Hello Scroll View </Text>
              <Text> Hello Scroll View </Text>
              <Text> Hello Scroll View </Text>
              <Text> Hello Scroll View </Text>
              <Text> Hello Scroll View </Text>

            </ScrollView>
          </View>

          <View style={{flex:1, backgroundColor : 'blue' }}>
              <Text> Hello Static View </Text>
          </View>

</View>