react-native - 从组件导航到屏幕反应原生
问题描述
嗨,当用户单击用户的图片时,我正在尝试进入个人资料页面。使用 onPress 和 navigation.navigate 时出现错误。
这是 App.js 结构,非常简单,只有两个屏幕。
import React from "react";
import { StyleSheet, Text, View } from "react-native";
import { createAppContainer, createSwitchNavigator } from "react-navigation";
import { createStackNavigator } from "react-navigation-stack";
import HomeScreen from "./screens/HomeScreen";
import ProfileScreen from "./screens/ProfileScreen";
import HomeProfile from "./components/HomeProfile";
const MainStack = createStackNavigator(
{
Home: {
screen: HomeScreen,
navigationOptions: {
headerShown: false,
title: null
}
},
Profile: {
screen: ProfileScreen,
navigationOptions: {
headerTintColor: "white",
headerStyle: {
backgroundColor: "#161E33",
borderBottomWidth: 0
},
title: null
}
}
},
{
initialRouteName: "Home"
}
);
class App extends React.Component {
render() {
return <MainStack />;
}
}
export default createAppContainer(MainStack);
这是我用于页面上半部分的组件所以我在主页中没有太多代码。目前一切都是硬编码的
import {
StyleSheet,
TouchableOpacity,
Image,
Text,
View,
TextInput,
TouchableWithoutFeedback,
Keyboard
} from "react-native";
import { Button } from "react-native-elements";
const HomeProfile = ({ navigation }) => {
return (
<>
<View style={styles.container}>
<Image
style={styles.background}
source={{
uri:
"https://images.pexels.com/photos/1080721/pexels-photo-1080721.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"
}}
/>
<TouchableOpacity onPress={() => navigation.navigate("Profile")}>
<Image
style={styles.image}
source={{
uri:
"https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=668&q=80"
}}
/>
<Text style={styles.name}>Abby Smith</Text>
<Text style={styles.unit}>Slater 116 #278</Text>
</TouchableOpacity>
</View>
</>
);
};
export default HomeProfile;
这是主页的一部分,它是主屏幕和默认屏幕,也是我导入组件的地方。
const [contactModal, setContactModal] = useState(false);
const [announcementsModal, setAnnouncementsModal] = useState(false);
const [maintenanceModal, setMaintenanceModal] = useState(false);
const [accessModal, setAccessModal] = useState(false);
return (
<TouchableWithoutFeedback onPress={() => Keyboard.dismiss()}>
<View style={styles.container}>
<HomeProfile />
错误信息是——
TypeError:未定义不是一个对象(评估'navigation.navigate')
解决方案
您需要将导航道具传递给HomeProfile才能使用 navigation.navigate。
<HomeProfile navigation={navigation}/>
const [contactModal, setContactModal] = useState(false);
const [announcementsModal, setAnnouncementsModal] = useState(false);
const [maintenanceModal, setMaintenanceModal] = useState(false);
const [accessModal, setAccessModal] = useState(false);
return (
<TouchableWithoutFeedback onPress={() => Keyboard.dismiss()}>
<View style={styles.container}>
<HomeProfile navigation={navigation} /> //====here
或者简单地说,您可以从 react-navigation 导入withNavigation并使用 HomeProfile 组件包装 withNavigation HOC,例如
withNavigation(主页配置文件)
import {withNavigation} from 'react-navigation';
const HomeProfile = ({ navigation }) => {
return (
<>
<View style={styles.container}>
<Image
style={styles.background}
source={{
uri:
"https://images.pexels.com/photos/1080721/pexels-photo-1080721.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"
}}
/>
<TouchableOpacity onPress={() => navigation.navigate("Profile")}>
<Image
style={styles.image}
source={{
uri:
"https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=668&q=80"
}}
/>
<Text style={styles.name}>Abby Smith</Text>
<Text style={styles.unit}>Slater 116 #278</Text>
</TouchableOpacity>
</View>
</>
);
};
export default withNavigation(HomeProfile); //check here
推荐阅读
- awk - 在 awk 中使用 if 语句来检查一个变量是否符合格式,如果符合,请遵循此路径
- android - Android/Kotlin:如何在类中获取对特定 SQLite 数据库名称执行 SQL 查询的函数?
- django - Celery 重启导致 RabbitMQ 中的计划任务重新交付
- javascript - 纯 JS 颜色滑块
- cuda - cudaGetLastError。哪个内核执行引发了它?
- javascript - 在 JavaScript 中将节点转换、转换或标记为/作为元素
- algorithm - TCP/IP高效包过滤
- r - ore.frame 元素与标签相连,无法摆脱标签
- c# - 不能在即时窗口中使用 nameof
- c - C 错误:需要左值作为赋值的左操作数