标签:
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