Question

我正试图通过创建一个简单的应用来处理反应导航;我只想要两个带按钮的屏幕，你可以点击它们进入它们之间。这是我的代码：

App.js：

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

import {
    StackNavigator,
} from 'react-navigation';

import OtherPage from './OtherPage';

const Home = ({navigation}) => (
    <View>
        <Text style={styles.title}>Welcome</Text>
        <Button title="Other Page" onPress={() => {
            navigation.navigate('OtherPage')
        }}></Button>
    </View>
);

const Nav = StackNavigator(
    {
        OtherPage: { screen: OtherPage},
        Index: {
            screen: Home
        }
    },
    {
        initialRouteName: 'Index',
    }
);

export default () => <Nav />;

OtherPage.js：

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

import { StackNavigator } from 'react-navigation';

const OtherPage = ({navigation}) => (
    <View>
        <Text>Other Page</Text>
        <Button title="Go Home" onPress={() => {
            navigation.navigate('Home');
        }}></Button>
    </View>
);

import Home from './App';
const Nav = StackNavigator(
    {
        OtherPage: { screen: OtherPage},
        Home: { screen: Home }, // THIS LINE CAUSES THE ERROR
    },
);

export default () => <Nav />;

由于某些原因，我从import Home from './App';返回的内容不是screen，因此我收到错误Route 'Home' should declare a screen。这肯定是导致问题的那条线，如果我评论它然后应用程序加载我可以点击主屏幕上的按钮转到另一页，但当然我卡在那里，不能回去

让我感到困惑的是，这些文件在声明所有内容方面基本相同，并且出于某种原因import OtherPage from './OtherPage';是有效screen但import Home from './App';不是。

任何人都可以帮助我吗？我做错了什么？

React-navigation'Home'应该声明一个屏幕

0 个答案: