React-Native : ScrollView not showing the full content

Question

I'm building an app with React-Native and for my Home Page im using the ScrollView but it doesn't show the full content. I have e header on the top so that may be blocking the full content or i don't know.

The code :

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"
}
});

Any idea how to fix this?

Answer 1

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

Answer 2

Try using contentContainerStyle instead of style with ScrollView .

Since I don't have access to your Carousel1 , Content , and Buttons component to give you a certain answer, I suggest you try the following:

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

Report back with your results.

Answer 3

从ScrollView中删除style = {{flex：1}}并查看