加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

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

发布时间:2020-12-15 07:21:45 所属栏目:百科 来源:网络整理
导读:/** * 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
/**
 * 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);







(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读