这是一个最简单的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);