react-native - 在本机反应中不导航到特定屏幕
问题描述
我是本机反应的新手:我创建了两个文件“Browse.js”和“Drawer.js”我在“Browse.js”中有一些按钮但是当我在“Drawer.js”中结束我的完整“Browse.js”时" 像这样:=>
import React, { Component } from "react";
import { Image, StyleSheet, ScrollView, TextInput, View } from "react-native";
import Slider from "react-native-slider";
import { AntDesign } from "@expo/vector-icons";
import { Foundation } from "@expo/vector-icons";
import { FontAwesome } from "@expo/vector-icons";
import { Ionicons } from "@expo/vector-icons";
import { MaterialCommunityIcons } from "@expo/vector-icons";
import { RoleLogin } from "./Browse";
import Browse from "./Browse";
import { createDrawerNavigator } from "@react-navigation/drawer";
import { NavigationContainer } from "@react-navigation/native";
import Login from "./Login"
import { Divider, Button, Block, Text, Switch } from "../components";
import { theme, mocks } from "../constants";
const Drawer = createDrawerNavigator();
export default function App() {
return (
<NavigationContainer>
<Drawer.Navigator initialRouteName="Browse" openByDefault>
<Drawer.Screen name="Browse" component={Browse} />
</Drawer.Navigator>
</NavigationContainer>
);
}
然后我无法从这里导航到特定屏幕意味着从抽屉屏幕:显示这样的错误=>任何导航器都没有处理带有有效负载的操作“NAVIGATE”。
这是我的 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("Drawer", {
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() {
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,
},
});
这是我的导航文件
import React from "react";
import { Image } from "react-native";
import { createAppContainer } from "react-navigation";
import { createStackNavigator } from "react-navigation-stack";
import { NavigationContainer } from "@react-navigation/native";
import { createDrawerNavigator } from "@react-navigation/drawer";
import Welcome from "../screens/Welcome";
import Login from "../screens/Login";
import SignUp from "../screens/SignUp";
import Forgot from "../screens/Forgot";
import Explore from "../screens/Explore";
// import Explore1 from "../screens/Explore1";
// import Explore2 from "../screens/Explore2";
// import Explore3 from "../screens/Explore3";
// import Explore4 from "../screens/Explore4";
// import Explore5 from "../screens/Explore5";
// import Explore6 from "../screens/Explore6";
// import Explore7 from "../screens/Explore7";
// import Explore8 from "../screens/Explore8";
import Browse from "../screens/Browse";
import Product from "../screens/Product";
//import Settings from "../screens/Settings";
import Drawer from "../screens/Drawer";
import MarketVisit from "../screens/MarketVisit";
import { theme } from "../constants";
const screens = createStackNavigator(
{
Welcome,
Login,
SignUp,
Forgot,
Explore,
Drawer,
//Browse,
//Product,
//Settings,
MarketVisit,
// NotificationsScreen,
// App,
},
{
defaultNavigationOptions: {
headerStyle: {
height: theme.sizes.base * 4,
backgroundColor: theme.colors.white, // or 'white
borderBottomColor: "transparent",
elevation: 0 // for android
},
// headerBackImage: <Image source={require("../assets/2.jpg")} />,
headerBackTitle: null,
headerLeftContainerStyle: {
alignItems: "center",
marginLeft: theme.sizes.base * 2,
paddingRight: theme.sizes.base
},
headerRightContainerStyle: {
alignItems: "center",
paddingRight: theme.sizes.base
}
}
}
);
export default createAppContainer(screens);
解决方案
推荐阅读
- html - Django 不显示 base.html 以外的模板
- vue.js - Vue子组件结构
- php - Codeignitor 从动态表单上传多个输入文件
- python - 使用 Python 的 MongoDB 批量插入失败
- node.js - 来自发送网格的 Web api 电子邮件正在垃圾邮件文件夹中发送
- json - 如何在 JsonSerializable 模型类中实现图像
- java - 尝试使用 Spring Config Server 时如何修复“没有任何可用的密码”JSch 异常?
- android - 错误 - 在模块中发现 Android 重复类
- azure - Azure 中的外部和内部防火墙
- core-data - 测试核心数据