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.