Écran vide avec navigation native de réaction sans code d'erreur

S'il vous plaît, regardez le débogueur et l'écran pour ce qui pourrait être un problème. Cependant, le code est fortement affiché ci-dessous pour votre lecture. De plus, je visais à naviguer vers une autre page en fonction de l'identifiant du contenu sélectionné.

App.js Le App.js est l'endroit où j'ai défini mon stackNavigator

import React, { Component } from 'react';
import {
    StyleSheet,
    View, 
    Text

} from 'react-native';
import axios from 'axios';

export default class Post extends Component{
    constructor(props){
        super(props);

    }



    render(){
        return (
        <View>
           <Text>My text</Text>
        </View>
        );
    }
}

const styles = StyleSheet.create({

});

Post.js

J'ai essayé de supprimer alignItem = center. En fait, j'ai supprimé mon style pour voir s'il y a un blocage de l'écran.

import React, { Component } from 'react';
import {
    ScrollView, 
    StyleSheet,
    View, 
    Text,
    InputText,
    TouchableOpacity
} from 'react-native';
import axios from 'axios';

export default class Post extends Component{
    constructor(props){
        super(props);
        this.state = {
            posts: []
        }
    }
     readMore = () => {

       ()=> this.props.navigation.navigate('PostSingleScreen');
       debugger;
     } 

    componentDidMount(){
        axios.get(`http://localhost/rest_api_myblog/api/post/read.php`)
        //.then(json => console.log(json.data.data[0].id))
        .then(json => json.data.data.map(mydata =>(
            {
                title: mydata.title,
                body: mydata.body,
                author: mydata.author,
                category_name: mydata.category_name, 
                id: mydata.id 
            }
        )))
        //.then(newData => console.log(newData))
       .then(newData => this.setState({posts: newData}))
       .catch(error => alert(error))

        }

    render(){
        return (
        <View>

        <ScrollView style={styles.scrollContent}>
            <View style={styles.header}>
                <Text style={styles.headerText}>Gist Monger</Text>
            </View> 
             {   
                 this.state.posts.map((post, index) =>(
                    <View key={index} style={styles.container}>
                        <Text style={styles.display}>
                            Author:  {post.author}
                        </Text>
                        <Text style={styles.display}>
                            Category: {post.category_name}
                        </Text>
                        <Text style={styles.display}>
                            Title: {post.title}
                        </Text>
                        <Text style={{overflow:'hidden'}}>
                            Id: {post.id}
                        </Text>
                     <TouchableOpacity style={styles.buttonContainer}
                     onPress = {() => this.readMore()}
                     >
                        <Text style={styles.buttonText}>

                            Read More
                        </Text>
                     </TouchableOpacity>

                     </View> 
                 ))
             }

        </ScrollView>
            <View style={styles.footer}></View>
        </View>
        );
    }
}

const styles = StyleSheet.create({

 header: {
     flex: 1,
     height:40,
     marginTop:50,
     marginBottom:10,
     flexDirection: 'row', 
     justifyContent:'center',


 },
display: {
   margin: 3,
   fontSize: 16
}, 

headerText: {
    fontWeight: 'bold', 
    fontSize: 40,
    color: '#6200EE'
},

 container: {
    backgroundColor:'#efefef',
    padding: 20,
    margin: 5,
    borderRadius:20,

    justifyContent: 'center', 
    alignItems: 'center'
},
footer: {
    flex: 1,
    backgroundColor:'#000',
    marginBottom:50
}, 
buttonContainer:{
    height: 30,
    width: 200,
    marginTop: 15,
    justifyContent: 'center', 
    alignItems: 'center',
    borderRadius: 15,
    backgroundColor:'#6200EE'
},
buttonText: {
alignContent: 'center',
color: 'white'
}
});

PostSingle.js

import React, {Component} from 'react';
import { StyleSheet, Text, View} from 'react-native';
import Post from './components/Post';
import PostSingle from './components/PostSingle';
import { createStackNavigator, createAppContainer } from 'react-navigation';

const RootStack = createStackNavigator(
  {
    PostScreen: { screen: Post},
    PostSingleScreen:{screen: PostSingle},

  }, 
  {
    initialRouteName: "PostScreen"
  }
);

const AppNavigator = createAppContainer(RootStack);
export default class App extends Component {
  constructor(props) {
    super(props);
  };
  render() {
    return (
      <View style={styles.container}>

        <AppNavigator/>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: '#F3F3F3',
  }
});