React native нажмите кнопку Переместить на другой экран

Я новичок в react native.Мне нужен простой сценарий здесь, нажав кнопку Перейти на новый экран. React native нажмите кнопку Переместить на другой экран Я пробовал это

<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.

}
6
ios react-native reactjs

3 ответов

пример:

напишите следующий код для индексирования.усвн.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);

в файле " root.УСВН.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;

этот код в файле " nextPage.УСВН.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;
4

вам нужно настроить навигатор компонент, и использовать . этой ответ должен провести вас через него.

2

Если вы хотите, чтобы это было просто, вы можете использовать этот пакет : https://github.com/react-native-simple-router-community/react-native-simple-router

0