javascript - 如何使用 DrawerNavigation 导出一个类并将其导入 React-native 的另一个类中?
问题描述
在我的 React-Native 项目中,我将 App.js 文件作为我的默认类。在这个类中,我使用了 DrawerNavigation。在这里,我为我的 App.js 类提供了代码-
应用程序.js
import React, { Component } from 'react';
import { View, Image, TouchableOpacity } from 'react-native';
import {
createDrawerNavigator,
createStackNavigator,
createAppContainer,
} from 'react-navigation';
import Screen1 from './pages/Screen1';
import Screen2 from './pages/Screen2';
import Screen3 from './pages/Screen3';
class NavigationDrawerStructure extends Component {
toggleDrawer = () => {
this.props.navigationProps.toggleDrawer();
};
render() {
return (
<View style={{ flexDirection: 'row' }}>
<TouchableOpacity onPress={this.toggleDrawer.bind(this)}>
{/*Donute Button Image */}
<Image
source={require('./image/drawer.png')}
style={{ width: 25, height: 25, marginLeft: 5 }}
/>
</TouchableOpacity>
</View>
);
}
}
const FirstActivity_StackNavigator = createStackNavigator({
First: {
screen: Screen1,
navigationOptions: ({ navigation }) => ({
title: 'Demo Screen 1',
headerLeft: <NavigationDrawerStructure navigationProps={navigation} />,
headerStyle: {
backgroundColor: '#FF9800',
},
headerTintColor: '#fff',
}),
},
});
const Screen2_StackNavigator = createStackNavigator({
Second: {
screen: Screen2,
navigationOptions: ({ navigation }) => ({
title: 'Demo Screen 2',
headerLeft: <NavigationDrawerStructure navigationProps={navigation} />,
headerStyle: {
backgroundColor: '#FF9800',
},
headerTintColor: '#fff',
}),
},
});
const Screen3_StackNavigator = createStackNavigator({
Third: {
screen: Screen3,
navigationOptions: ({ navigation }) => ({
title: 'Demo Screen 3',
headerLeft: <NavigationDrawerStructure navigationProps={navigation} />,
headerStyle: {
backgroundColor: '#FF9800',
},
headerTintColor: '#fff',
}),
},
});
const DrawerNavigatorExample = createDrawerNavigator({
Screen1: {
//Title
screen: FirstActivity_StackNavigator,
navigationOptions: {
drawerLabel: 'Demo Screen 1',
},
},
Screen2: {
//Title
screen: Screen2_StackNavigator,
navigationOptions: {
drawerLabel: 'Demo Screen 2',
},
},
Screen3: {
//Title
screen: Screen3_StackNavigator,
navigationOptions: {
drawerLabel: 'Demo Screen 3',
},
},
});
export default createAppContainer(DrawerNavigatorExample);
现在,问题是我想将另一个类作为我的默认类,并且我想从该类导入 App.js,然后启动 App.js 类。但是在 App.js 类中,我已经有一个导出 -
export default createAppContainer(DrawerNavigatorExample);
在 React-native 中,它不允许我导出多个模块。所以,如果我想导出 App.js 文件并在另一个类的视图中使用它,那么我该怎么做呢?
解决方案
我认为您可以像这样导出默认课程:
import React, { Component } from 'react';
import { View, Image, TouchableOpacity } from 'react-native';
import {
createDrawerNavigator,
createStackNavigator,
createAppContainer,
} from 'react-navigation';
import Screen1 from './pages/Screen1';
import Screen2 from './pages/Screen2';
import Screen3 from './pages/Screen3';
class NavigationDrawerStructure extends Component {
toggleDrawer = () => {
this.props.navigationProps.toggleDrawer();
};
render() {
return (
<View style={{ flexDirection: 'row' }}>
<TouchableOpacity onPress={this.toggleDrawer.bind(this)}>
{/*Donute Button Image */}
<Image
source={require('./image/drawer.png')}
style={{ width: 25, height: 25, marginLeft: 5 }}
/>
</TouchableOpacity>
</View>
);
}
}
const FirstActivity_StackNavigator = createStackNavigator({
First: {
screen: Screen1,
navigationOptions: ({ navigation }) => ({
title: 'Demo Screen 1',
headerLeft: <NavigationDrawerStructure navigationProps={navigation} />,
headerStyle: {
backgroundColor: '#FF9800',
},
headerTintColor: '#fff',
}),
},
});
const Screen2_StackNavigator = createStackNavigator({
Second: {
screen: Screen2,
navigationOptions: ({ navigation }) => ({
title: 'Demo Screen 2',
headerLeft: <NavigationDrawerStructure navigationProps={navigation} />,
headerStyle: {
backgroundColor: '#FF9800',
},
headerTintColor: '#fff',
}),
},
});
const Screen3_StackNavigator = createStackNavigator({
Third: {
screen: Screen3,
navigationOptions: ({ navigation }) => ({
title: 'Demo Screen 3',
headerLeft: <NavigationDrawerStructure navigationProps={navigation} />,
headerStyle: {
backgroundColor: '#FF9800',
},
headerTintColor: '#fff',
}),
},
});
export const DrawerNavigatorExample = createAppContainer({
Screen1: {
//Title
screen: FirstActivity_StackNavigator,
navigationOptions: {
drawerLabel: 'Demo Screen 1',
},
},
Screen2: {
//Title
screen: Screen2_StackNavigator,
navigationOptions: {
drawerLabel: 'Demo Screen 2',
},
},
Screen3: {
//Title
screen: Screen3_StackNavigator,
navigationOptions: {
drawerLabel: 'Demo Screen 3',
},
},
});
export default new NavigationDrawerStructure();
比,你可以像这样导入:
import { DrawerNavigatorExample }, NavigationDrawerStructure from './App.js';
推荐阅读
- postgresql - how to prevent postgres views calling redundant functions
- python-3.x - 我在这里的编码有什么问题?
- ruby-on-rails - has_many 通过rails中的动态条件
- python - 诊断间歇性/“滞后”的 Websocket 数据收集
- c# - Mdi 父面板后面的启动画面(等待表单)
- php - EXIF 旋转适用于 iOS,但不适用于 Android?
- python - 如何从包含 0xEB 字符的文件中读取?
- functional-programming - 如何阅读此功能代码
- python - 根据dataframe split获取一系列数据
- php - 请帮我调试条带错误