React-Native：ScrollView沒有顯示全部內容

Question

我正在使用React-Native構建一個應用程序，並使用ScrollView為我的主頁im構建了一個應用程序，但是它沒有顯示全部內容。 我在頂部有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"
}
});

任何想法如何解決這個問題？

Answer 1

嘗試使用react native Flatlist而不是ScrollView： React-native Flatlist

Answer 2

嘗試使用contentContainerStyle而不是ScrollView的style 。

由於我無權訪問您的Carousel1 ， Content和Buttons組件來給您一定的答案，因此建議您嘗試以下操作：

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

報告結果。

Answer 3

從ScrollView中刪除style = {{flex：1}}並查看