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