React-Native：ScrollView 未显示完整内容答案

【问题标题】：React-Native : ScrollView not showing the full contentReact-Native：ScrollView 未显示完整内容
【发布时间】：2019-09-15 10:04:52
【问题描述】：

我正在使用 React-Native 构建一个应用程序，并为我的主页使用 ScrollView，但它没有显示完整的内容。我在顶部有 e 标题，因此可能会阻止全部内容或我不知道。

代码：

import React from "react";
import { View, StyleSheet, Text, ScrollView } from "react-native";
import Content from "../components/Content/content";
import Header from "../components/Header/header";
import Carousel1 from "../components/Carousel/index";
import Buttons from "../components/Buttons/buttons";

export default class HomeScreen extends React.Component {
static navigationOptions = ({ navigation }) => {
let drawerLabel = "Home";
return { drawerLabel };
};

render() {
return (
  <View style={styles.container}>
    <Header {...this.props} />
    <ScrollView style={{flex:1}}>
      <Carousel1 />
      <Content />
      <Buttons />
    </ScrollView>
  </View>
  );
 }
}

const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#f9f9f9"
}
});

知道如何解决这个问题吗？

【问题讨论】：

看世博小吃示例：snack.expo.io/@professorxii/scrollview

标签： javascript reactjs react-native scrollview

【解决方案1】：

尝试使用 react native Flatlist 而不是 ScrollView： React-native Flatlist

【讨论】：

我曾经遇到过这个问题，我用 Flatlist 解决了它......它与标题几乎相同，我在主容器上有 flex: 1, flex-direction: 列，我也把出于某种原因，另一个容器中的平面列表。

【解决方案2】：

尝试使用contentContainerStyle 而不是style 和ScrollView。

由于我无权访问您的Carousel1、Content和Buttons组件给您一个确定的答案，建议您尝试以下方法：

render() {
return (
  <View style={styles.container}>
    <Header {...this.props} />
    <ScrollView contentContainerStyle={{ flexDirection:"column" }}>
      <Carousel1 />
      <Content />
      <Buttons />
    </ScrollView>
  </View>
  );
 }
}

报告你的结果。

【讨论】：

【解决方案3】：

从 ScrollView 中移除 style={{flex:1}} 并查看

【讨论】：