React Native Navigation：子组件未在屏幕上呈现

Question

我遵循文档here并编写了此代码。

App.js

import React from "react";
import {createAppContainer, createStackNavigator} from 'react-navigation';
import LoginScreen from "./src/components/LoginScreen";


export default App = () => createAppContainer(createStackNavigator({
    Login: {screen: LoginScreen},
}));

LoginScreen.js

import React, {Component} from 'react';
import {View, Text, Button} from 'react-native';

export default class LoginScreen extends Component {
    static navigationOptions = {
        title: 'Login',
    };

    render() {
        const {navigate} = this.props.navigation;
        return (
            <View style={this.styles.viewStyle}>
                <Text> Login </Text>
                <Button
                    title="Go to Jane's profile"
                    onPress={() => navigate('Home', {name: 'Jane'})}
                />
            </View>

        );
    }
}

输出

黑屏。登录页面未显示在屏幕上。

Answer 1

您正在尝试在App.js

中导出方法

要么导入并将其用作方法，要么将默认导出更改为

export default App = createAppContainer(createStackNavigator({
    Login: {screen: LoginScreen},
}));