SahanS SahanS - 1 month ago 7
React JSX Question

React native button click move to another screen

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

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;