1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586 |
- import React, {Component} from 'react';
- import {
- Text,
- View,
- ScrollView,
- TouchableOpacity,
- Image,
- StyleSheet,
- AlertIOS
- } from 'react-native';
-
- export default class StyledScreen extends Component {
- static navigatorStyle = {
- drawUnderNavBar: true,
- drawUnderTabBar: true,
- navBarTranslucent: true
- };
- static navigatorButtons = {
- rightButtons: [{
- icon: require('../../img/navicon_edit.png'),
- id: 'compose',
- testID: 'e2e_is_awesome'
- }]
- };
- 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 (
- <ScrollView style={{flex: 1}}>
-
- <Image style={{width: undefined, height: 100}} source={require('../../img/colors.png')} />
-
- <View style={{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.onPopPress.bind(this) }>
- <Text style={styles.button}>Pop Screen</Text>
- </TouchableOpacity>
-
- </View>
-
- </ScrollView>
- );
- }
- onNavigatorEvent(event) {
- if (event.id == 'compose') {
- AlertIOS.alert('NavBar', 'Compose button pressed');
- }
- }
- onPushPress() {
- this.props.navigator.push({
- title: "More",
- screen: "example.PushedScreen"
- });
- }
- onPushStyledPress() {
- this.props.navigator.push({
- title: "More",
- screen: "example.StyledScreen"
- });
- }
- onPopPress() {
- this.props.navigator.pop();
- }
- }
-
- const styles = StyleSheet.create({
- button: {
- textAlign: 'center',
- fontSize: 18,
- marginBottom: 10,
- marginTop:10,
- color: 'blue'
- }
- });
|