我是 React Native 的新手,我已经创建了 Browse.js 屏幕,现在我想从正确的位置在那个屏幕中显示抽屉。但我不知道如何创建那个抽屉。如果您知道,请在下方输入抽屉代码并告诉我,我应该在 Browse.js 文件中的何处添加此代码
这是我的 Browse.js 屏幕代码
import React, { Component } from "react";
import {
Dimensions,
Image,
StyleSheet,
ScrollView,
TouchableOpacity,
View,
} from "react-native";
import { ThemeColors } from "react-navigation";
import { Card, Badge, Button, Block, Text } from "../components";
import { theme, mocks } from "../constants";
import Settings from "./Settings";
import { NotificationsScreen, App } from "./Settings";
const { width } = Dimensions.get("window");
const Drawer = createDrawerNavigator();
import { createDrawerNavigator } from "@react-navigation/drawer";
import { NavigationContainer } from "@react-navigation/native";
import Drawer1 from "./Settings";
import Home from "./Settings";
class Browse extends Component {
state = {
// active: "Products",
// active: "Select_Acivity",
categories: [],
error: [],
// data: [],
roles: "",
username: "",
password: "",
lading: false,
title: "",
data: "",
};
//++++++++++++++++++++++++++++++Drawer fun start++++++++++++++++++++++++++++++++++
//++++++++++++++++++++++++++++++Drawer fun close++++++++++++++++++++++++++++++++++
//*******************navagte to setting when data fetch start*************************/
RoleLogin() {
// const { data } = this.state;
// const { username, password, roles } = this.state;
fetch(
"https://jsonplaceholder.typicode.com/todos/1",
//fetch(
// "https://nasdigital.tech/Android_API_CI/validate_login_details",
{
method: "GET",
headers: { "Content-Type": "application/json" },
// body: JSON.stringify([{ data}]),
}
)
.then((response) => response.json())
.then((json) => {
//login to check details from server and then display or navigate to another screen
if (json != "error") {
// if (response && response.length && response[0].message != "error")
alert(JSON.stringify(json));
this.props.navigation.navigate("Settings", {
data: json.title,
});
// .navigate("Settings", { data: json.title });
// this.props.navigation.navigate("Settings",{data : json.title});
} else {
alert("Cehck Details");
}
})
.catch((error) => alert("Cehck Details"));
}
//*******************navagte to setting when data fetch close**************************** */
componentDidMount() {
this.setState({ categories: this.props.categories });
}
// handleTab = tab => {
// const { categories } = this.props;
// const filtered = categories.filter(category =>
// category.tags.includes(tab.toLowerCase())
// );
// this.setState({ active: tab, categories: filtered });
// };
renderTab(tab) {
const { active } = this.state;
const isActive = active === tab;
return (
<TouchableOpacity
key={`tab-${tab}`}
onPress={() => this.handleTab(tab)}
style={[styles.tab, isActive ? styles.active : null]}
>
<Text size={16} medium gray={!isActive} secondary={isActive}>
{tab}
</Text>
</TouchableOpacity>
);
}
// render() {
// return <Settings />;
// }
render() {
const { profile, navigation } = this.props;
const { categories } = this.state;
// // const tabs = ["Products", "Inspirations", "Shop"];
// const tabs = ["Select_Activity", "Market_Visit"];
// const tabs = ["Select_Activity"];
const tabs = [""];
return (
<Block>
<Block flex={false} row center space="between" style={styles.header}>
<Text h1 bold>
Select Activity
</Text>
<Button onPress={() => this.RoleLogin()}>
<Image source={profile.avatar} style={styles.avatar} />
</Button>
{/* <Button onPress={() => navigation.navigate("Settings")}>
<Image source={profile.avatar} style={styles.avatar} />
</Button> */}
</Block>
<Block flex={false} row style={styles.tabs}>
{tabs.map((tab) => this.renderTab(tab))}
</Block>
<ScrollView
showsVerticalScrollIndicator={false}
style={{ paddingVertical: theme.sizes.base * 2 }}
>
<Block flex={false} row space="between" style={styles.categories}>
{categories.map((category) => (
<TouchableOpacity
key={category.name}
onPress={() => navigation.navigate("MarketVisit", { category })}
>
<Card center middle shadow style={styles.category}>
<Badge
margin={[0, 0, 15]}
size={90}
color="rgb(255, 163, 102)"
>
<Image source={category.image} />
</Badge>
<Text medium height={20}>
{category.name}
</Text>
<Text gray caption>
{category.count}
</Text>
</Card>
</TouchableOpacity>
))}
</Block>
</ScrollView>
</Block>
);
}
}
//+++++++++++++++++++++++++++++++++++++++++
//++++++++++++++++++++++++++++++++++++++
Browse.defaultProps = {
profile: mocks.profile,
categories: mocks.categories,
};
export default Browse;
const styles = StyleSheet.create({
header: {
paddingHorizontal: theme.sizes.base * 2,
},
avatar: {
height: theme.sizes.base * 1.0,
width: theme.sizes.base * 1.5,
},
tabs: {
borderBottomColor: theme.colors.gray2,
borderBottomWidth: StyleSheet.hairlineWidth,
marginVertical: theme.sizes.base,
marginHorizontal: theme.sizes.base * 2,
},
tab: {
marginRight: theme.sizes.base * 7,
paddingBottom: theme.sizes.base,
},
active: {
borderBottomColor: theme.colors.secondary,
borderBottomWidth: 3,
},
categories: {
flexWrap: "wrap",
paddingHorizontal: theme.sizes.base * 1.5,
marginBottom: theme.sizes.base * 2,
},
category: {
// this should be dynamic based on screen width
minWidth: (width - theme.sizes.padding * 2.4 - theme.sizes.base) / 2,
maxWidth: (width - theme.sizes.padding * 2.4 - theme.sizes.base) / 2,
maxHeight: (width - theme.sizes.padding * 2.4 - theme.sizes.base) / 2,
},
});
答案 0 :(得分:0)
此链接非常清楚,可以回答您的问题https://reactnavigation.org/docs/drawer-based-navigation/
例如用 Drawer 包裹你的屏幕:
const Drawer = createDrawerNavigator();
export default function App() {
return (
<NavigationContainer>
<Drawer.Navigator initialRouteName="Browse">
<Drawer.Screen name="Home" component={Browse} />
</Drawer.Navigator>
</NavigationContainer>
);
}