123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172 |
- import React, {
- Component,
- Text,
- View,
- ScrollView,
- TouchableOpacity,
- StyleSheet
- } from 'react-native';
-
- export default class ModalScreen extends Component {
- static navigatorButtons = {
- leftButtons: [{
- title: 'Close',
- id: 'close'
- }]
- };
- constructor(props) {
- super(props);
- // if you want to listen on navigator events, set this up
- this.props.navigator.setOnNavigatorEvent(this.onNavigatorEvent.bind(this));
- }
- render() {
- return (
- <View style={{flex: 1, padding: 20}}>
-
- <TouchableOpacity onPress={ this.onPushPress.bind(this) }>
- <Text style={styles.button}>Push Plain Screen</Text>
- </TouchableOpacity>
-
- <TouchableOpacity onPress={ this.onPushStyledPress.bind(this) }>
- <Text style={styles.button}>Push Styled Screen</Text>
- </TouchableOpacity>
-
- <TouchableOpacity onPress={ this.onClosePress.bind(this) }>
- <Text style={styles.button}>Close Modal</Text>
- </TouchableOpacity>
-
- </View>
- );
- }
- onNavigatorEvent(event) {
- if (event.id == 'close') {
- this.props.navigator.dismissModal();
- }
- }
- onPushPress() {
- this.props.navigator.push({
- title: "More",
- screen: "example.PushedScreen"
- });
- }
- onPushStyledPress() {
- this.props.navigator.push({
- title: "More",
- screen: "example.StyledScreen"
- });
- }
- onClosePress() {
- this.props.navigator.dismissModal();
- }
- }
-
- const styles = StyleSheet.create({
- button: {
- textAlign: 'center',
- fontSize: 18,
- marginBottom: 10,
- marginTop:10,
- color: 'blue'
- }
- });
|