javascript - React Native:将导航路线作为道具传递给动态呈现的组件
问题描述
我正在构建一个应用程序,其中几个屏幕具有动态呈现的卡片,这些卡片映射到名为ENTRIES
. 这些卡片中的每一张都可以按下以导航到相应的屏幕,但是,我似乎无法让导航正常工作。
我传递的是从屏幕中作为道具传递到组件中的screen
值,然后将其传递到onClick as 中。ENTRIES
Settings.js
ClickableCard
TouchableOpacity
this.props.navigation.navigate(screen)
但是我不断收到以下错误TypeError: undefined is not an object (evaluating '_this3.props.navigation.navigate')
下面是一个示例代码:
应用程序.js 文件
import React from 'react;
import {createMaterialBottomTabNavigator} from '@react-navigation/material-bottom-tabs';
import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';
import Home from './src/screens/Home';
import SettingsScreen from './src/screens/SettingsScreen';
import PrivacyScreen from './src/screens/PrivacyScreen';
import NotificationsScreen from './src/screens/NotificationsScreen';
import SoundsScreen from './src/screens/SoundsScreen';
import ThemeScreen from './src/screens/ThemeScreen';
const PrivacyStack = createStackNavigator();
const SettingsStack = createStackNavigator();
const AuthStack = createStackNavigator();
const MainStack = createStackNavigator();
const Tabs = createMaterialBottomTabNavigator();
const TabNavigator = () => {
return (
<Tabs.Navigator
initialRouteName="Home"
<Tabs.Screen
name="Home"
component={HomeStack}
/>
Tabs.Screen
name="Settings"
component={SettingsStack}
children={this.SettingsStack}
</Tabs.Navigator>
)
}
const AuthStack = () => (
<AuthStack.Navigator>
<AuthStack.Screen
name="Auth"
component={Auth}
/>
</AuthStack.Navigator>
);
const SettingsStackScreen = () => (
<SettingsStack.Navigator>
<SettingsStack.Screen
name="Settings"
component={Settings}
/>
<SettingsStack.Screen
name="Privacy"
component={PrivacyStack}
/>
<SettingsStack.Screen
name="Theme"
component={ThemeScreen}
/>
<SettingsStack.Screen
name="Notifications"
component={NotificationsScreen}
/>
<SettingsStack.Screen
name="Sound"
component={SoundsScreen}
/>
</SettingsStack.Navigator>
);
const PrivacyStack = () => (
<PrivacyStack.Navigator>
<PrivacyStack.Screen
name="Privacy"
component={PrivacyScreen}
/>
<PrivacyStack.Screen
name="Notifications"
component={NotificationsScreen}
/>
</PrivacyStack.Navigator>
);
const App = () => {
return (
<NavigationContainer ref={navigationRef}>
<MainStack.Navigator>
<MainStack.Screen name="Tabs" component={TabNavigator} />
<MainStack.Screen
name="Auth"
component={AuthStack}
options={{gestureEnabled: false}}
/>
</MainStack.Navigator>
</NavigationContainer>
)
}
设置.js 文件
import React, {Component} from 'react';
import {TouchableOpacity, ScrollView} from 'react-native;
import ClickableCard from './ClickableCard'
export default class Settings extends Component {
render(screen, index) {
return (
<ScrollView>
{ENTRIES.map((entry, index) => (
<ClickableCard screen={entry.screen} key={entry.index}/>
))}
</ScrollView>
)
}
export default Settings
ClickableCard.js 组件
import React, {Component} from 'react';
import {TouchableOpacity, ScrollView} from 'react-native;
export default class ClickableCard extends Component {
constructor(props) {
super(props);
}
render() {
const {
screen,
key
} = this.props
return (
<TouchableOpacity
key={key}
onPress={() => this.props.navigation.navigate(screen)}>
</TouchableOpacity>
)
}
}
entry.js 文件
import React from 'react';
export const ENTRIES = [
{
name: "Theme",
screen: "ThemeScreen",
},
{
name: "Sounds",
screen: "SoundsScreen",
},
{
name: "Notifications",
screen: "NotificationsScreen",
},
]
解决方案
您正在尝试访问导航堆栈之外的导航。
如果您使用的是功能组件,则可以使用 useNavigation 挂钩,但由于这是一个基于类的组件,您必须将导航作为道具发送,或者您可以按照文档中的建议执行以下操作
import { useNavigation } from '@react-navigation/native';
class ClickableCard extends Component {
constructor(props) {
super(props);
}
render() {
const { screen, key } = this.props;
return (
<TouchableOpacity
key={key}
onPress={() =>
this.props.navigation.navigate(screen)
}></TouchableOpacity>
);
}
}
const ClickableCardWithNavigation= (props) {
const navigation = useNavigation();
return <ClickableCard {...props} navigation={navigation} />;
}
export default connect(ClickableCardWithNavigation)(TodoList)
推荐阅读
- css - 我的 svg 圆没有正确旋转
- mysql - 将 pyspark Dataframe 结果写入 Mysql 表
- c# - 在 C# 中获取 PowerShell.Invoke() 输出
- mysql - 删除相互抵消的行
- python - IrfanView:命令行批量转换
- ios - 如何在不使用 VPN 的情况下计算我的 iOS 应用程序的网络使用情况?
- php -
在我的时间里不起作用 - php - 如何找到不超过三个字符串的数组值?
- javascript - React Native / Redux - 渲染项目列表,如何通过 id 为每个项目请求数据以显示详细信息而不覆盖先前请求的数据?
- node.js - sequelize 制作外键复合和唯一索引。