React Navigation--Stack Navigator Simple Example

前端之家收集整理的这篇文章主要介绍了React Navigation--Stack Navigator Simple Example前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
本程序功能:两个页面,第一个页面有一个按钮,点击按钮跳转到第二个页面,按返回键可以返回到第一个页面,按标题栏的返回按钮也可以返回到第一个页面

这是一个最简单的React Navigation。


  1. /**
  2. * Created by YiBing on 2017/5/4.
  3. * Introducing Stack Navigator:
  4. * 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
  5.  
  6. navigator.
  7. */
  8.  
  9. import React from 'react';
  10. import {
  11. AppRegistry,Text,Button,View,} from 'react-native';
  12. import { StackNavigator } from 'react-navigation';
  13.  
  14. class HomeScreen extends React.Component {
  15. static navigationOptions = {
  16. title: 'Welcome',};
  17. render() {
  18. const { navigate } = this.props.navigation;
  19. return (
  20. <View>
  21. <Text>Hello,Chat App!</Text>
  22. <Button
  23. onPress={() => navigate('Chat',{user: 'yb'})} //Passing params
  24. title="Chat with Lucy"
  25. />
  26. </View>
  27. );
  28. }
  29. }
  30.  
  31. class ChatScreen extends React.Component {
  32. // Nav options can be defined as a function of the screen's props:
  33. static navigationOptions = ({ navigation }) => ({
  34. title: `Chat with ${navigation.state.params.user}`,});
  35. render() {
  36. // The screen's current route is passed in to `props.navigation.state`:
  37. const { params } = this.props.navigation.state;
  38. return (
  39. <View>
  40. <Text>Chat with {params.user}</Text>
  41. </View>
  42. );
  43. }
  44. }
  45.  
  46. const SimpleAppReactNavigation = StackNavigator({
  47. Home: { screen: HomeScreen },Chat: { screen: ChatScreen },});
  48.  
  49. AppRegistry.registerComponent('SimpleAppReactNavigation',() =>
  50.  
  51. SimpleAppReactNavigation);

猜你在找的React相关文章