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.

[React Native] Basic iOS Routing -- NavigatorIOS
原文:http://www.cnblogs.com/Answer1215/p/5693722.html