React native button click move to another screen - ios

Question

I'm new to react native.I need simple scenario in here by click button go to new screen.
React native button click move to 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 next code to 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 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 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 set up a navigator component, and use the navigator.push function. This answer should walk you through it.

Answer 3

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