Почему свойство 'flex' не работает на моем ScrollView, как ожидалось? - PullRequest
Новая
       46

Почему свойство 'flex' не работает на моем ScrollView, как ожидалось?

0 голосов
/ 06 ноября 2019

У меня проблемы с тем, чтобы scrollView занимал в 8 раз больше места, чем adContainer, используя Flex. Вместо этого экран отображается так, как будто оба установлены на «Flex: 1», каждый из которых занимает равное количество места.

Код: 

const CreateAccountScreen = (props) => {
  return (
    <View style={styles.mainContainer}>
      <ScrollView  style={styles.scrollView}>
        <CreateAccountForm/>
      </ScrollView>
      <View style={styles.adContainer}>
        <Advertisement/>
      </View> 
    </View>        
  );

} 

const styles = StyleSheet.create({
mainContainer:{
    flex: 1,
  },
  scrollView: {
    flex: 8
  },
  adContainer: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: 'black'
  }
})

ScrollView работает нормально, но не занимает столько места, сколько мне нужно (в 8 раз большерекламного контейнера). Я попытался добавить 'View' вокруг ScrollView и поместить в него 'Flex: 8'.

Код:

const CreateNewAccountScreenA = (props) => {
      return (
        <View style={styles.mainContainer}>
          <View style={styles.scrollViewContainer}>
            <ScrollView style={styles.scrollView} >
              <CreateAccountFormA/>
            </ScrollView>
          </View>
          <View style={styles.adContainer}>
            <Advertisement/>
          </View> 
        </View>        
      );
  }

const styles = StyleSheet.create({
  mainContainer:{
    flex: 1,
  },
  scrollViewContainer: {
    flex: 8
  },
  scrollView: {
    flex: 1
  },
  adContainer: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: 'black'
  }
})

Это действительно дает эффект, который я бы хотел получить, поскольку объем пространства, занимаемого scrollViewContainer,однако тогда дочерний элемент ScrollView внутри него перестанет функционировать должным образом.

И я не уверен, что понимаю, что делает contentContainerStyle с ScrollViews, я тоже пытался это использовать, однако я не уверен, что использовалэто правильно. Код:

const CreateNewAccountScreenA = (props) => {
      return (
        <View style={styles.mainContainer}>
          <View contentContainerStyle={styles.contentContainer}>
            <ScrollView style={styles.scrollView} >
              <CreateAccountFormA/>
            </ScrollView>
          </View>
          <View style={styles.adContainer}>
            <Advertisement/>
          </View> 
        </View>        
      );
  }

const styles = StyleSheet.create({
  mainContainer:{
    flex: 1,
  },
  contentContainer: {
    flex: 8
  },
  scrollView: {
    flex: 1
  },
  adContainer: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: 'black'
  }
})

Приведенный выше код привел к тому, что adContainer занял все пространство экрана. Я не уверен, что я делаю неправильно, но любая помощь будет принята с благодарностью! Спасибо, мир.

...