我是 React Native 的新手。
我在AlbumScreen
组件中有一个相册列表。单击一个相册时,我需要打开另一个屏幕,其中包含相册内的所有图片。
这是我的主要App
组成部分:
// Edit show imports for App.js
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createMaterialBottomTabNavigator } from '@react-navigation/material-bottom-tabs';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
import AlbumScreen from "./components/AlbumScreen"
import HomeScreen from "./components/HomeScreen"
// End of edit
const Tab = createMaterialBottomTabNavigator();
export default class App extends React.Component {
render() {
return (
<NavigationContainer>
<Tab.Navigator
initialRouteName="Home"
activeColor="#E0B1CB"
inactiveColor="#5E548E"
barStyle={{ backgroundColor: '#231942' }}
>
<Tab.Screen
name="Home"
component={HomeScreen}
options={{
tabBarLabel: 'Home',
tabBarIcon: ({ color }) => (
<MaterialCommunityIcons
name="home"
color={color}
size={26}
/>
),
}}
/>
<Tab.Screen
name="Album"
component={AlbumScreen}
options={{
tabBarLabel: 'My albums',
tabBarIcon: ({ color }) => (
<MaterialCommunityIcons
name="animation"
color={color}
size={26}
/>
),
}}
/>
</Tab.Navigator>
</NavigationContainer>
)
}
}
在我的 AlbumScreen 组件中,我使用super(props)
. 我<Button />
要移动到另一个屏幕DetailsScreen
:
// Edit show imports for AlbumScreen.js
import React from 'react';
import { Button, SafeAreaView, Navigator } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
// End of edit
export default class AlbumScreen extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<SafeAreaView style={styles.container}>
<Button
title="Go to Details"
onPress={() => this.props.navigation.navigate('DetailsScreen')}
/>
</SafeAreaView>
)
}
}
这里给出了我的 DetailsScreen(来自React Native Navigation doc的示例):
function DetailsScreen({ navigation }) {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Details Screen</Text>
<Button
title="Go to Details... again"
onPress={() => navigation.navigate('Details')}
/>
</View>
);
}
当我单击 时<Button />
,出现以下错误:
The action 'NAVIGATE' with payload {"name":"DetailsScreen"} was not handled by any navigator.
Do you have a screen named 'DetailsScreen'?
If you're trying to navigate to a screen in a nested navigator, see https://reactnavigation.org/docs/nesting-navigators#navigating-to-a-screen-in-a-nested-navigator.
我想念一些东西:你能帮我弄清楚为什么它不切换到 DetailsScreen 吗?非常感谢。