反应原生按钮点击移动到另一个屏幕

Posted 2023-03-15

【中文标题】反应原生按钮点击移动到另一个屏幕

【英文标题】：React native button click move to another screen

【发布时间】：2016-02-11 05:50:23

【问题描述】：

我是本机反应的新手。我需要简单的场景，点击按钮转到新屏幕。 我试过这个

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

【参考方案1】：

例子：

将下一个代码写入 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);

在文件“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;

文件“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;

【讨论】：

感谢您的回复。它没有给出任何错误。给我简单的布局。不显示按钮。有什么要安装的 NavigatorIOS

【参考方案2】：

您需要设置一个navigator 组件，并使用navigator.push 功能。 This 答案应该会引导您完成。

【参考方案3】：

如果你想要它简单，你可以使用这个包：https://github.com/react-native-simple-router-community/react-native-simple-router