React Navigation--Stack Navigator and Tab Navigator联合使用

最新推荐文章于 2025-04-21 12:39:45 发布

原创最新推荐文章于 2025-04-21 12:39:45 发布 · 6.7k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#React Navigation #Stack Navigator #Tab Navigator

React Native 专栏收录该内容

10 篇文章

订阅专栏

本文详细介绍了如何在React Native应用中结合使用Stack Navigator和Tab Navigator，通过实例展示它们的配置和交互，帮助开发者实现更复杂的导航结构。

/**
 * Created by YiBing on 2017/5/4.
 */

import React from 'react';
import {
    AppRegistry,
    Text,
    Button,
    View,
} from 'react-native';

import { StackNavigator } from 'react-navigation';
import { TabNavigator } from "react-navigation";

class ChatScreen extends React.Component {
    // Nav options can be defined as a function of the screen's props:
    static navigationOptions = ({ navigation }) => ({
        title: `Chat with ${navigation.state.params.user}`,
    });
    render() {
        // The screen's current route is passed in to `props.navigation.state`:
        const { params } = this.props.navigation.state;
        return (
            <View>
                <Text>Chat with {params.user}</Text>
            </View>
        );
    }
}

class RecentChatsScreen extends React.Component {
    render() {
        const { navigate } = this.props.navigation;
        return (
            <View>
                <Text>List of recent chats</Text>
                <Button
                    onPress={() => navigate('Chat', {user: 'Lucy'})} //Passing params
                    title="Chat with Lucy"
                />
            </View>
        );
    }
}

class AllContactsScreen extends React.Component {
    render() {
        const { navigate } = this.props.navigation;
        return (
            <View>
                <Text>List of all contacts</Text>
                <Button
                    onPress={() => navigate('Chat', {user: 'Jane'})} //Passing params
                    title="Chat with Jane"
                />
            </View>
        );
    }
}

const MainScreenNavigator = TabNavigator({
    Recent: { screen: RecentChatsScreen },
    All: { screen: AllContactsScreen },
});

MainScreenNavigator.navigationOptions = {
    title: 'My Chats',
};

const SimpleAppReactNavigation = StackNavigator({
    Home: { screen: MainScreenNavigator },
    Chat: { screen: ChatScreen },
});

AppRegistry.registerComponent('SimpleAppReactNavigation', () => SimpleAppReactNavigation);