Реагируйте на встроенную навигацию: дочерние компоненты не отображаются на экране

Question

Я следовал документации здесь и написал этот код.

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