[React Native] Basic iOS Routing -- NavigatorIOS

Inside the app component, we use NavigatiorIOS to render the compoent:

class githubnotetaker extends Component {
  render() {
    return (
      <NavigatorIOS
          style={styles.container}
          initialRoute={{
            title: 'Github note taker',
            component: Main
          }}
        />
    );
  }
}

This is like rouer. 'initialRoute': for the initial loading, it will loads 'Main' component by default.

Whole code for index.ios.js:

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

import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    NavigatorIOS
} from 'react-native';
import Main from './App/components/main';

const styles = StyleSheet.create({
  container:{
    flex: 1,
    backgroundColor: '#111111'
  },
});

class githubnotetaker extends Component {
  render() {
    return (
      <NavigatorIOS
          style={styles.container}
          initialRoute={{
            title: 'Github note taker',
            component: Main
          }}
        />
    );
  }
}

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

Main component:

import React, { Component, PropTypes } from 'react';
import { View, Text, StyleSheet } from 'react-native';

var style = StyleSheet.create({
    mainContainer: {
        flex: 1,
        padding: 30,
        marginTop: 65,
        flexDirection: 'column',
        justifyContent: 'center',
        backgroundColor: '#48BBEC'
    },
    title: {
        marginBottom: 20,
        fontSize: 25,
        textAlign: 'center',
        color: '#fff'
    },
    searchInput: {
        height: 50,
        padding: 4,
        marginRight: 5,
        fontSize: 23,
        borderWidth: 1,
        borderColor: 'white',
        borderRadius: 8,
        color: 'white'
    },
    buttonText: {
        fontSize: 18,
        color: '#111',
        alignSelf: 'center'
    },
    button: {
        height: 45,
        flexDirection: 'row',
        backgroundColor:'white',
        borderColor:'white',
        borderWidth:1,
        borderRadius:8,
        marginBottom:10,
        alignSelf:'stretch',
        justifyContent:'center'
    }
});

export default class Main extends Component{
    render(){
       return (
           <View style={style.mainContainer}>
               <Text>Testing the Router</Text>
           </View>
       )
    }
}

We sue 'View', 'Text', 'StyleSheet' from react-native for rendering the content. And apply the styles.