ScrollView 不显示内容 React-native

Question

我正在使用react-native构建一个应用程序，在我需要添加ScrollView之前一切正常，无论我添加什么屏幕并且内容停止呈现，都没有显示任何错误，无论发生什么都是沉默的，我我尝试了一些我在互联网上看到的东西，但没有解决我的问题，我在下面放了一个示例代码...

我的代码：

export default () => (
    <View style={{flex: 1}}>
        <ScrollView style={{flex: 1}}>

             // My page content here

        </ScrollView>    
    </View>
);

看起来很简单，但我没有找到解决方案，如果有人能帮助我，谢谢。

Answer 1

尝试为滚动视图的样式添加高度和宽度，然后从那里开始。

或

设为绝对位置，并设置上下左右各为0

position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0

Answer 2

我想是因为你在 root 和 scrollview 中使用了 flex 样式。这会影响您的显示数据不适合屏幕。尝试删除 flex 所有这些，然后运行它首先没有 flex 样式。

Answer 3

'flex: 1' 导致了这个问题，因为每当内容溢出时都会使用 ScrollView，所以显然您不应该指定它的宽度。试试这个 -

export default () => (
  <ScrollView>
    <View style={{flex: 1}}>
         // Page content here
    </View>    
  </ScrollView>
);

Answer 4

为我解决此问题的代码是使用 contentContainerStyle={{flex: 1}} 而不仅仅是样式。这会在滚动视图的外部容器而不是内部容器上设置 flex。

Answer 5

ScrollView组件继承了View的高度。你可以试试这个

<View style={{flex: 1, height: 100}}>
    <ScrollView style={{flex: 1}}>
         // My page content here
    </ScrollView>    
</View>

来晚了，但也许还有用。

Answer 6

嗯，我的问题是我在 height 上对每个 View 使用百分比，scrollview 似乎不能那样工作

例如：height :30% 将不起作用 height 300 可以

Answer 7

如果你可以在 scrollview 的末尾添加一些 space ，你可能会看到所有内容

 export default () => (
      <ScrollView>
        <View style={{flex: 1,paddingBottom: 300}}>
             // Page content here
        </View>    
      </ScrollView>
    );

Answer 8

这应该可以解决问题：

export default () => (
  <View style={{flex: 1}}>
    <ScrollView }>
         // Page content 
    </ScrollView >    
  </View>
);

Answer 9

ScrollView 从包裹它的视图获取高度 (Flex)，您可能希望将它包裹在 (<> )

ScrollView 不显示内容 React-native

ScrollView not show content React-native

scrollview

react-native