Change your own mouse click on another screen

Question

I am new to reacting to native. I need a simple script here by clicking the button go to a new screen. Change my own mouse click on another screen I tried this

<TouchableHighlight onPress={this.register} style={styles.button1}> <Text style={styles.buttontext1}> Registration </Text> </TouchableHighlight> register(){ //What should I write in here to go to a new layout. } 

Answer 1

Example:

write the following code index.ios.js

 'use strict'; import React, { AppRegistry, Component, StyleSheet, View, NavigatorIOS } from 'react-native'; var rootPage = require('./root.IOS') var client = React.createClass({ render() { return ( <NavigatorIOS style = {styles.container} initialRoute={{ title: "Root", navigationBarHidden: true, component:rootPage }}/> ); } }); const styles = StyleSheet.create({ container: { flex: 1, } }); AppRegistry.registerComponent('client', () => client); 

in the file "root.IOS.js"

 'use strict'; import React, { StyleSheet, View, TouchableHighlight, Text, Dimensions, } from 'react-native'; var NextPage = require('./nextPage.IOS.js'); var rootPage = React.createClass({ goDerper: function() { this.props.navigator.push({ title: 'nextPage', component: NextPage, navigationBarHidden: true, passProps: {myElement: 'text'} }); }, render: function(){ return( <View style={styles.container}> <TouchableHighlight onPress={() => this.goDerper()}> <Text>We must go derper</Text> </TouchableHighlight> </View> ); } }) var styles = StyleSheet.create({ container: { flex: 1, marginTop: 20 } }); module.exports = rootPage; 

this code in the file "nextPage.IOS.js"

 'use strict'; var React = require('react-native'); var { StyleSheet, View, Text, } = React; var Register = React.createClass({ render: function() { return ( <View style={styles.container}> <Text style={styles.text}>My value: {this.props.myElement}</Text> <Text>any text</Text> </View> ); } }) var styles = StyleSheet.create({ container: { flex: 1 } }); module.exports = nextPage; 

Answer 2

You need to configure the navigator component and use the navigator.push function. This answer should go through it.

Answer 3

If you want this to be simple, you can use this package: https://github.com/react-native-simple-router-community/react-native-simple-router