在 React Native 应用程序中单击按钮打开另一个屏幕

Question

我是 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) 的 "navigation" 道具。我有一个 <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 吗？非常感谢。

Answer 1

根据您的代码，详细信息屏幕不是导航的一部分，这就是您收到上述错误的原因。您将需要像下面这样更改代码，以拥有一个堆栈导航器并将您的 TabNavigator 嵌套在其中作为初始屏幕。

const Tab = createMaterialBottomTabNavigator();

function HomeTabs() {
  return (
    <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>
  );
}

function DetailsScreen() {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Details Screen</Text>
    </View>
  );
}

const Stack = createStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen name="Home" component={HomeTabs} />
        <Stack.Screen name="Details" component={DetailsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

在 React Native 应用程序中单击按钮打开另一个屏幕

Open another screen on button click in React Native app

react-native

react-native-navigation

react-native-tabnavigator