React native button click move to another screen

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.