0

我无法使用“Flex”让“scrollView”占用 8 倍于“adContainer”的空间。
相反，屏幕呈现好像两者都设置为“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 功能正常，但它没有占用我想要的空间量（是 adContainer 的 8 倍）。
我尝试在 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”占据了整个屏幕空间。
我不确定我做错了什么，但任何帮助将不胜感激！谢谢，平安。

4

0 回答 0