React native 带有flex 1的ScrollView使其不可滚动

我试图在

ScrollView

上运行flex，只要ScrollView有

flex:1

，内部的滚动就不起作用。 这是expo fiddle（您可以运行此代码并使用它）

请注意，如果您从

ScrollView

中删除

flex:1

，它确实允许滚动，但随后您将失去灵活性（能够让红色容器向下推动上部框（ScrollView）），因此我必须在那里安装一个flex

p、 我只在安卓上工作，还没有在iPhone上测试过（我不介意结果）

你知道我错过了什么吗？为什么

ScrollView

在具有

flex:1

时无法正常工作？

---

谢谢

我认为您的问题在于您告诉ScrollView使用flex=1来占用所有可用空间，但问题是ScrollView的工作方式不同。它会自动渲染其所有子对象，因此它与flex的工作方式不同。这与性能更好的普通ListView或FlatList不同

我相信这种零食解决了这个问题：

基本上，我得到设备的高度，并根据（屏幕高度-红色框的当前高度）将ScrollView设置为固定高度

这已经提供了如何做到这一点

但是这里有一个解释，为什么你不能用你的方法去做。

contentContainerStyle

中给出的样式是

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

因此，当您将

flex:1

应用于

contentContainer

时，它会将

ScrollView

的整个高度作为其父视图

flex:1

您还可以模拟-

能够让红色容器向下推动上部箱子

通过将父对象添加到

滚动视图

，并在父对象中应用样式

<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>

this.setState（{height:this.state.height+10}）}>
点击

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

---

试试这个，它会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);

import React，{Component}来自'React'；
从“react native”导入{AppRegistry，View，ScrollView}；
导出默认类AlignItemsBasics扩展组件{
render（）{
返回(
//尝试将'alignItems'设置为'flex start'
//尝试将'justifyContent'设置为'flex end'。
//尝试将'flexDirection'设置为'row'。
);
}
};
//如果使用CreateReact本机应用程序，请跳过此行
AppRegistry.registerComponent（'AwesomeProject'，（）=>AlignItemsBasics）；

最好的方法是将滚动视图包装到一个视图中并使用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>

Hello滚动视图
Hello滚动视图
Hello滚动视图
Hello滚动视图
Hello滚动视图
Hello滚动视图
你好静态视图

如何在快餐店运行代码。。。也不确定，虽然我认为您需要将

滚动视图

包装在

视图

中，但您是否尝试将

flex:1

添加到最外层的

视图

？@LGSon是的，我尝试过，但仍然无法正常工作，无论哪种方式，我都会丢失flex或滚动。您为什么不能这样做。。。可能需要这样来解决这个问题：@Danny这是因为ScrollView内部的工作方式。请解释一下你想要完成什么。是否要在红色框上方显示框列表？什么东西现在不起作用？（注意：如果我点击红色框，在上一届世博会上什么也没发生）做得很好。我本来也打算采取同样的方法，但你抢先了我。这就是答案。我用这个解决了同样的问题。阅读更多关于flex grow的内容，你就会明白这一点。这是它的头儿，它拯救了这一天！这应该是公认的答案。工作完美，避免了额外的视图和不必要的逻辑