本程序功能:两个页面,第一个页面有一个按钮,点击按钮跳转到第二个页面,按返回键可以返回到第一个页面,按标题栏的返回按钮也可以返回到第一个页面。
这是一个最简单的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);