Question

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

我的代码：

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

＆＃39; flex：1＆＃39;导致问题，因为只要内容溢出就会使用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的末尾添加一些空间，则可能会看到所有内容

 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

9 个答案: