Question

我的App.js文件变得越来越大，所以我决定将我的所有课程移到他们自己的单独文件中，这就是我的App.js中剩下的内容

import React from 'react';
import {
    AppRegistry,
    Text,
    View, 
    Button,
    Image
} from 'react-native';
import { StackNavigator } from 'react-navigation';
import { TabNavigator } from 'react-navigation';

//screen imports
import RecentChatScreen from './RecentChatScreen';
import AllContactsScreen from './AllContactsScreen';
import ChatScreen from './ChatScreen';
import HomeScreen from './HomeScreen';
import InfoScreen from './InfoScreen';

const MainScreenNavigator = TabNavigator({
    Home: { screen: HomeScreen },
    Recent: { screen: RecentChatsScreen },
    All: { screen: AllContactsScreen },
});

const NavTest = StackNavigator({
    Home: { screen: MainScreenNavigator },
    Chat: { screen: ChatScreen },
    Info: { screen: InfoScreen }
});

我觉得这很好看。

但是在某些类文件中，我需要在按钮事件中引用其他屏幕，如下所示：

onPress={ () => navigate('Home')}

当所有内容都在App.js中之前，这个工作正常，但是当定义在App.js中时，我现在如何在单独的文件中引用这些屏幕（Home，Chat，Info，Recent，All）？

谢谢！

Answer 1

您可以在head：{/ p>中export他们

App.js

然后从中导入它们：

// App.js
// ...
    export {
      MainScreenNavigator,
      NavTest,
    }

Answer 2

如果您的目的只是导航到不同的屏幕，而不是使用特定屏幕类中定义的任何属性，那么您将不需要导入任何内容。定义StackNavigator时，假设您将该值传入AppRegistry作为应用程序的入口点。在你的情况下，它可能是这样的： AppRegistry.registerComponent('NavTest', () => NavTest)

现在，在任何屏幕中，navigatation对象都作为道具传递。然后，您可以使用它导航到任何已定义的屏幕。 StackNavigator的初始设置本质上是从routeName到反应组件（类）的映射。因此，当您想要导航到特定类时，您需要的只是路径的名称而不是它所代表的类或组件，导航器已经拥有了所有这些。此名称将是传递到特定屏幕的StackNavigator的密钥。在您的示例中，routeNames为Home，Chat和Info。所以只做这样的事情就可以了：

const { navigate } = this.props.navigation;
return (
  <View>
    <Text>Navigate Test</Text>
    <Button onPress={() => navigate('Chat')} title="Go to chat"/>
  </View>
);

在不同的类文件中引用常量和变量

2 个答案: