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);
(编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |