diff --git a/index.android.js b/index.android.js index de150fc..e140247 100644 --- a/index.android.js +++ b/index.android.js @@ -1,53 +1,14 @@ -/** - * Sample React Native App - * https://github.com/facebook/react-native - * @flow - */ - import React, { Component } from 'react'; import { AppRegistry, - StyleSheet, - Text, - View } from 'react-native'; +import App from './src/App' -export default class reactNavigationSample extends Component { - render() { - return ( - - - Welcome to React Native! - - - To get started, edit index.android.js - - - Double tap R on your keyboard to reload,{'\n'} - Shake or press menu button for dev menu - - - ); - } +const reactNavigationSample = () => { + return ( + + ); } -const styles = StyleSheet.create({ - container: { - flex: 1, - justifyContent: 'center', - alignItems: 'center', - backgroundColor: '#F5FCFF', - }, - welcome: { - fontSize: 20, - textAlign: 'center', - margin: 10, - }, - instructions: { - textAlign: 'center', - color: '#333333', - marginBottom: 5, - }, -}); AppRegistry.registerComponent('reactNavigationSample', () => reactNavigationSample); diff --git a/index.ios.js b/index.ios.js index 82b81a4..3cc6ca0 100644 --- a/index.ios.js +++ b/index.ios.js @@ -1,53 +1,28 @@ -/** - * Sample React Native App - * https://github.com/facebook/react-native - * @flow - */ - import React, { Component } from 'react'; import { AppRegistry, - StyleSheet, - Text, - View } from 'react-native'; +import App from './src/App' +import { StackNavigator } from 'react-navigation'; +import SecondScreen from './src/SecondScreen' + +class reactNavigationSample extends Component { + static navigationOptions = { + title: 'Home Screen', + }; + + render(){ + const { navigation } = this.props; -export default class reactNavigationSample extends Component { - render() { return ( - - - Welcome to React Native! - - - To get started, edit index.ios.js - - - Press Cmd+R to reload,{'\n'} - Cmd+D or shake for dev menu - - + ); } } -const styles = StyleSheet.create({ - container: { - flex: 1, - justifyContent: 'center', - alignItems: 'center', - backgroundColor: '#F5FCFF', - }, - welcome: { - fontSize: 20, - textAlign: 'center', - margin: 10, - }, - instructions: { - textAlign: 'center', - color: '#333333', - marginBottom: 5, - }, +const SimpleApp = StackNavigator({ + Home: { screen: reactNavigationSample }, + SecondScreen: { screen: SecondScreen, title: 'ss' }, }); -AppRegistry.registerComponent('reactNavigationSample', () => reactNavigationSample); +AppRegistry.registerComponent('reactNavigationSample', () => SimpleApp); diff --git a/package.json b/package.json index e93e8e9..777ef8b 100644 --- a/package.json +++ b/package.json @@ -8,7 +8,8 @@ }, "dependencies": { "react": "15.4.2", - "react-native": "0.40.0" + "react-native": "0.40.0", + "react-navigation": "^1.0.0-beta.1" }, "devDependencies": { "babel-jest": "18.0.0", @@ -19,4 +20,4 @@ "jest": { "preset": "react-native" } -} \ No newline at end of file +} diff --git a/src/App.js b/src/App.js new file mode 100644 index 0000000..47c4489 --- /dev/null +++ b/src/App.js @@ -0,0 +1,45 @@ +import React, { Component } from 'react'; +import { + StyleSheet, + Text, + Button, + View +} from 'react-native'; +import { StackNavigator } from 'react-navigation'; + +const styles = StyleSheet.create({ + container: { + flex: 1, + justifyContent: 'center', + alignItems: 'center', + backgroundColor: '#F5FCFF', + }, + welcome: { + fontSize: 20, + textAlign: 'center', + margin: 10, + }, + instructions: { + textAlign: 'center', + color: '#333333', + marginBottom: 5, + }, +}); + +const App = (props) => { + const { navigate } = props.navigation; + + return ( + + + Welcome to React Native Navigation Sample! + +