React Navigation--Stack Navigator Simple Example

最新推荐文章于 2025-06-10 12:01:49 发布

原创最新推荐文章于 2025-06-10 12:01:49 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#React Navigation #Stack Navigator

React Native 专栏收录该内容

10 篇文章

订阅专栏

本文介绍了一个使用React Navigation实现的简单页面导航示例。该示例包括两个页面：首页和聊天页。首页有一个按钮，点击后会跳转到聊天页，并可以在标题栏中显示聊天对象的名字。

本程序功能：两个页面，第一个页面有一个按钮，点击按钮跳转到第二个页面，按返回键可以返回到第一个页面，按标题栏的返回按钮也可以返回到第一个页面。

这是一个最简单的React Navigation。

/**
 * Created by YiBing on 2017/5/4.
 * Introducing Stack Navigator:
 * The title of the HomeScreen is configurable on the static navigationOptions,
 * where many options can be set to configure the presentation of the screen in the 

navigator.
 */

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

class HomeScreen extends React.Component {
    static navigationOptions = {
        title: 'Welcome',
    };
    render() {
        const { navigate } = this.props.navigation;
        return (
            <View>
                <Text>Hello, Chat App!</Text>
                <Button
                    onPress={() => navigate('Chat', {user: 'yb'})} //Passing params
                    title="Chat with Lucy"
                />
            </View>
        );
    }
}

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>
        );
    }
}

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

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

SimpleAppReactNavigation);