使用flex 1的ScrollView使其不可滚动

Question

我试图运行柔性ScrollView,并且只要有滚动型flex: 1的滚动内不起作用.这里是世博会小提琴(您可以运行此代码并使用) https://snack.expo.io/SySerKNp-

请注意,如果你flex: 1从ScrollView它中删除它确实让滚动,但然后你失去了弹性力量(能够让红色容器向下推高上方框(ScrollView))所以我必须有一个flex.

ps - 我只在android上工作,我还没有在iPhone上测试过(我不介意那里的结果)

知道我错过了什么吗？为什么ScrollView当它有一个flex: 1？谢谢 !

Answer 1

尝试在scrollView内容容器样式中使用flexGrow:1而不是flex:1,如下所示.

<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

Answer 2

我相信你的问题是你告诉ScrollView占用flex = 1的所有可用空间,但事实是ScrollView的工作方式不同.它会自动渲染其所有子节点,因此它与flex的工作方式不同.这是与具有更好性能的普通ListView或FlatList的区别.

我相信这个零食解决了这个问题:https: //snack.expo.io/SkxN9GOT-

基本上,我得到了设备的高度,并根据(screenHeight - 红色框的当前高度)将ScrollView设置为固定高度.

Answer 3

最好的办法是将你的 ScrollView 包装在一个 View 中，并用 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>