我有一个使用React导航的React Native项目。我一直在尝试向抽屉中添加图标。我创建了一个抽屉,然后添加了屏幕。未添加图标或图像,也不沿屏幕名称显示。我正在使用本机基础库并在反应导航中使用expo 库。
MainDrawer.js
import React from "react";
import { Platform, Image, StyleSheet } from "react-native";
import {
createStackNavigator,
DrawerItems,
createDrawerNavigator
} from "react-navigation";
import { Container, Header, Body, Content, style, Left } from "native-base";
import HomeScreen from "../screens/HomeScreen";
import LinksScreen from "../screens/LinksScreen";
import SettingsScreen from "../screens/SettingsScreen";
import girl from "./MainTabNavigator";
const DrawerMenu = props => (
<Container>
<Header style={styles.container}>
<Body style={{ justifyContent: "center", alignItems: "center" }}>
<Image source={require("./ekarwanlogo.png")} style={styles.logo} />
</Body>
</Header>
<Content>
<DrawerItems {...props} />
</Content>
</Container>
);
const lala = createDrawerNavigator(
{
Home: girl,
Links: { screen: LinksScreen },
Settings: { screen: SettingsScreen }
},
{
initialRouteName: "Home",
drawerWidth: 200,
drawerPosition: Left,
contentComponent: DrawerMenu,
drawerOpenRoute: "DrawerOpen",
drawerCloseRoute: "DrawerClose",
drawerToggleRoute: "Drawertoggle"
}
);
这是HomeScreen.js
import React, { Component } from "react";
import {
Container,
Header,
Left,
Body,
Right,
Content,
Title,
Button,
Icon
} from "native-base";
import { Text, Image, drawerIcon } from "react-native";
import Ionicons from "react-native-vector-icons/Ionicons";
export default class HomeScreen extends Component {
static navigationOptions = {
header: null,
drawerIcon: <Image source={require("./robot-dev.png")} />
};
render() {
return (
<Container>
<Header>
<Left>
<Button transparent>
<Icon
name="menu"
onPress={() => this.props.navigation.openDrawer()}
/>
</Button>
</Left>
<Body>
<Title>Header</Title>
</Body>
<Right />
</Header>
<Content>
<Text>here is the content</Text>
</Content>
</Container>
);
}
}