index.ios.js

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  TouchableHighlight,
} from 'react-native';
import NavigationRoot from './src/containers/NavigationRoot';
import navigationStore from './src/store/navigation';

class routersinux extends Component {
  navigateTo(key) {
    navigationStore.push({key});
  }

  pop() {
    navigationStore.pop();
  }

  replaceRoot(key) {
    navigationStore.replaceAtIndex(0,{key});
  }

  replace(current, key) {
    navigationStore.replaceAt(current, {key})
  }

  render() {
    return (
      <NavigationRoot initialRoute="home" direction="vertical">
        <View style={styles.container} routeKey="home">
          <Text style={styles.welcome}>
            Welcome to React Native!
          </Text>
          <TouchableHighlight
            underlayColor='#EFEFEF'
            onPress={() => this.navigateTo('explain')}
            style={styles.button}>
              <Text>go to explain</Text>
          </TouchableHighlight>
        </View>
        <View style={styles.container} routeKey="explain">
          <Text style={styles.instructions}>
            To get started, edit index.ios.js
          </Text>
          <TouchableHighlight 
            underlayColor='#EFEFEF'
            onPress={() => this.pop()}
            style={styles.button}>
              <Text>Pop view</Text>
          </TouchableHighlight>
          <TouchableHighlight
            underlayColor='#EFEFEF'
            onPress={() => this.replace('explain','reload')}
            style={styles.button}>
              <Text>Replace for reload</Text>
          </TouchableHighlight>
        </View>
        <View style={styles.container} routeKey="reload">
          <Text style={styles.instructions}>
            Press Cmd+R to reload,{'\n'}
            Cmd+D or shake for dev menu
          </Text>
          <TouchableHighlight 
            underlayColor='#EFEFEF'
            onPress={() => this.pop()}
            style={styles.button}>
              <Text>Pop view</Text>
          </TouchableHighlight>
        </View>
      </NavigationRoot>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
  button: {
    height: 70,
    marginTop: 20,
    justifyContent: 'center',
    alignItems: 'center',
    marginLeft: 20,
    marginRight: 20,
    backgroundColor: '#EDEDED'
  }
});

AppRegistry.registerComponent('routersinux', () => routersinux);