[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={            ' Github Note taker ' ,            component:main          }}         />    );}  }

This is a like rouer. ' Initialroute ': For the initial loading, it'll 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 ';varstyle =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 '}}); Exportdefaultclass 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.

[React Native] Basic IOS Routing--Navigatorios