在单独的 class 个文件中引用常量和变量
referencing constants and variables across separate class files
我的 App.js 文件变得非常大,所以我决定将所有 class 移出到它们自己的单独文件中,这就是我的 App.js[ 中保留的内容=13=]
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 }
});
我认为看起来不错。
但是在某些 class 文件中,我需要在按钮事件中引用其他屏幕,如下所示:
onPress={ () => navigate('Home')}
这在一切都在 App.js 之前工作得很好,但是当定义在 App.js?
谢谢!
你可以 export
他们 App.js
:
// App.js
// ...
export {
MainScreenNavigator,
NavTest,
}
然后从中导入它们:
import {MainScreenNavigator, NavTest} from './path/to/App.js';
如果您的目的只是导航到不同的屏幕,而不是使用特定屏幕中定义的任何属性 class,那么您不需要导入任何内容。当您定义 StackNavigator
并假设您将该值传入 AppRegistry
作为应用程序的入口点时。在您的情况下,它可能是这样的:
AppRegistry.registerComponent('NavTest', () => NavTest)
现在在任何屏幕中,navigatation
对象作为道具传入。然后您可以使用它导航到任何定义的屏幕。 StackNavigator
的初始设置本质上是从 routeName
到 React 组件(class)的映射。所以当你想导航到一个特定的 class 时,你所需要的只是路由的名称,而不是它所代表的 class 或组件,导航器已经拥有了所有这些。此名称将是传递给特定屏幕的 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>
);
我的 App.js 文件变得非常大,所以我决定将所有 class 移出到它们自己的单独文件中,这就是我的 App.js[ 中保留的内容=13=]
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 }
});
我认为看起来不错。
但是在某些 class 文件中,我需要在按钮事件中引用其他屏幕,如下所示:
onPress={ () => navigate('Home')}
这在一切都在 App.js 之前工作得很好,但是当定义在 App.js?
谢谢!
你可以 export
他们 App.js
:
// App.js
// ...
export {
MainScreenNavigator,
NavTest,
}
然后从中导入它们:
import {MainScreenNavigator, NavTest} from './path/to/App.js';
如果您的目的只是导航到不同的屏幕,而不是使用特定屏幕中定义的任何属性 class,那么您不需要导入任何内容。当您定义 StackNavigator
并假设您将该值传入 AppRegistry
作为应用程序的入口点时。在您的情况下,它可能是这样的:
AppRegistry.registerComponent('NavTest', () => NavTest)
现在在任何屏幕中,navigatation
对象作为道具传入。然后您可以使用它导航到任何定义的屏幕。 StackNavigator
的初始设置本质上是从 routeName
到 React 组件(class)的映射。所以当你想导航到一个特定的 class 时,你所需要的只是路由的名称,而不是它所代表的 class 或组件,导航器已经拥有了所有这些。此名称将是传递给特定屏幕的 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>
);