这是一个最简单的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);
原文地址:https://www.jb51.cc/react/304087.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。