32

我试图在 a 上运行 flex ScrollView，只要 ScrollView 里面有flex: 1滚动就不起作用。这是博览会小提琴（您可以运行此代码并使用） https://snack.expo.io/SySerKNp-

请注意，如果您flex: 1从其中删除ScrollView它确实让滚动，但随后您失去了弹性力量（让红色容器向下推上框（ScrollView）的能力），所以我必须在那里有一个弹性。

ps - 我只在安卓上工作，我还没有在 iPhone 上测试过（我不介意那里的结果）

知道我错过了什么吗？为什么ScrollView当它有一个时不能正常工作flex: 1？谢谢 ！

4

5 回答 5

81

尝试在 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

于 2017-10-24T11:31:14.893 回答
15

我相信您的问题是您告诉 ScrollView 使用 flex=1 占用所有可用空间，但问题是 ScrollView 的工作方式不同。它会自动渲染它的所有子元素，因此它与 flex 的工作方式不同。这就是与性能更好的普通 ListView 或 FlatList 的区别。

我相信这种小吃可以解决这个问题： https ://snack.expo.io/SkxN9GOT-

基本上，我正在获取设备的高度并根据（screenHeight - 红框的当前高度）将 ScrollView 设置为固定高度。

于 2017-10-21T00:55:36.730 回答
4

最好的办法是将您的 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>
于 2018-12-06T17:23:42.760 回答
4

这个答案已经提供了如何做到这一点。

但这里有一个解释为什么你不能用你的方法来做。给出的样式contentContainerStyle是

应用于包含所有子视图的滚动视图内容容器。

所以当你申请它时flex: 1，它的高度也是它的父级。contentContainerScrollViewflex: 1View

您还可以模拟 -

让红色容器向下推上盒的能力

通过将父级添加到父级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>
于 2017-10-24T02:43:39.487 回答
1

试试这个，它会 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);
于 2018-09-06T08:50:42.663 回答