用于路由的组件必须是react native中的react组件

在App.js中，您不能<AppContainer />像下面这样插入，

return (
    <View style={styles.MainContainer}>
        <FlatList
            data={this.state.dataSource}
            renderSeparator={this.FlatListItemSeparator}
            renderItem={({ item }) =>
                <Text style={styles.rowViewContainer} onPress={this.OpenSecondActivity.bind(this, item.id)} >
                    {item.Name} {item.DateRecorded}
                </Text>}
        />

        <AppContainer />
    </View>
);

由于您已经导入了app.jsimport HomeScreen from './App'并包装在其中<AppContainer />

为了解决这个问题，创建一个HomeScreen.js并将您的app.js代码插入其中

import React from 'react';
import {
    FlatList,
    View,
    Text,
    ActivityIndicator
} from 'react-native';

export default class HomeScreen extends React.Component {
    static navigationOptions =
        {
            title: 'Sermons',
        }
    constructor(props) {
        super(props);
        this.state = {
            isLoading: true
        }
    }
    componentDidMount() {
        fetch('http://d74bb1dc.ngrok.io/sermons.php')
            .then((response) => response.json())
            .then((responseJson) => {
                this.setState({
                    isLoading: false,
                    dataSource: responseJson
                });
            })
            .catch((error) => {
                console.error(error);
            });
    }
    ListViewItemSeparator = () => {
        return (
            <View
                style={{
                    height: .5,
                    width: "100%",
                    backgroundColor: "#000",
                }}
            />
        );
    }

    OpenSecondActivity(id) {
        this.props.navigation.navigate("Second", { FlatListClickItemHolder: id });
    }
    render() {
        if (this.state.isLoading) {
            return (
                <View style={{ flex: 1, paddingTop: 20 }}>
                    <ActivityIndicator />
                </View>
            );
        }
        return (
            <View style={styles.MainContainer}>
                <FlatList
                    data={this.state.dataSource}
                    renderSeparator={this.FlatListItemSeparator}
                    renderItem={({ item }) => <Text style={styles.rowViewContainer} onPress={this.OpenSecondActivity.bind(this, item.id)} > {item.Name} {item.DateRecorded} </Text>}
                />
                <AppContainer />
            </View>
        );
    }
}

之后，将您的nav代码导入app.js<AppContainer />并按如下所示进行导出，

export default class App extends React.Component {
  render() {
    return <AppContainer />;
  }
}

如果您有疑问，请随时提出。希望这对您有所帮助。