Question

我有这个反应原生的画面

    import React, { Component } from 'react';
    import { AppRegistry,TouchableOpacity, Text ,Button,Image,TextInput,PropTypes,StyleSheet,View,NavigatorIOS,TouchableHighlight} from 'react-native';


    class LoginView extends Component {

        render() {
            return (
                <View style={styles.container}>
                    <Text style={styles.title}>
                        HYGEX
                    </Text>
                    <View>
                        <TextInput
                            placeholder="Username"
                            style={styles.formInput}
                             />
                        <TextInput
                            placeholder="Password"
                            secureTextEntry={true}
                            style={styles.formInput1}
                             />

                    <TouchableHighlight style={styles.button}
                    onPress={() => this.move()}>
                    <Text style={styles.buttonText}>Login</Text>
                   </TouchableHighlight>

                    </View>
                </View>
            );
        }

      move() {
      //what i can do here to go to Socrce screen ???
        }
      }

登录界面之类的东西，现在我点击进入TouchableHighlight 我需要打开这个屏幕

    'use strict';
import React, { Component } from 'react';
import { AppRegistry, ListView, Text, View } from 'react-native';

class HygexListView extends Component {

  constructor(props) {
    super(props);
    const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
    this.state = {
      dataSource: ds.cloneWithRows([
        'John', 'Joel', 'James', 'Jimmy', 'Jackson', 'Jillian', 'Julie', 'Devin'
      ])
    };
  }
  render() {
    return (
      <View style={{flex: 1, paddingTop: 22}}>
        <ListView
          dataSource={this.state.dataSource}
          renderRow={(rowData) => <Text>{rowData}</Text>}
        />
      </View>
    );
  }
}
module.exports = HygexListView;

我试图实现移动方法，但我失败了！知道为什么吗？

当单击TouchableHighlight时，react-native是否有更改屏幕的方法？

Answer 1

正如其他人指出的那样，你必须使用Navigator的实例来在屏幕之间进行转换。也许您可以查看React Native repo中的example apps。我还发现this router package很容易设置，它还包含一个示例应用程序，您可以将其作为起点。

修改作为使用react-native-router-flux的简单示例，您可以编辑Example.js目录中的Example文件，如下所示：

import React, { Component, } from 'react'; import { StyleSheet, Text, View, } from 'react-native'; import LoginView from './LoginView'; import HygexListView from './HygexListView'; import { Scene, Router, Actions, } from 'react-native-router-flux'; const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: 'transparent', justifyContent: 'center', alignItems: 'center', }, tabBarStyle: { backgroundColor: '#eee', }, tabBarSelectedItemStyle: { backgroundColor: '#ddd', }, }); // define this based on the styles/dimensions you use const getSceneStyle = (/* NavigationSceneRendererProps */ props, computedProps) => { const style = { flex: 1, backgroundColor: '#fff', shadowColor: null, shadowOffset: null, shadowOpacity: null, shadowRadius: null, }; if (computedProps.isActive) { style.marginTop = computedProps.hideNavBar ? 0 : 64; style.marginBottom = computedProps.hideTabBar ? 0 : 50; } return style; }; class Example extends Component { render() { return ( <Router getSceneStyle={getSceneStyle}> <Scene key="login" component={LoginView} initial={true}/> <Scene key="hygex" component={HygexListView } /> </Router> ); } } export default Example;

然后，在组件的move函数中，您必须执行以下操作：

move(){ Actions.hygex(); // This will perform a slide transition, but you can customize it. Have a look at the docs for that.

我没有测试过代码，所以可能会有一些拼写错误/缺少导入/代码，但它应该让你知道你需要做什么。 }

Answer 2

你必须实现一个导航器，它大致是一个管理与屏幕相关的所有内容的组件，以及带有后退按钮等的标题栏。

由于您是初学者，我建议您查看此链接上的文档：

https://facebook.github.io/react-native/docs/navigator.html

对不起，简短的回答，我在手机上。

祝你好运！

Answer 3

"use strict";

var React = require("react-native");

var {
    Component,
    StyleSheet,
    Text,
    TextInput,
    TouchableHighlight,
    View,
} = React;

var SecureView = require("./SecureView");

class LoginView extends Component {

    constructor(props) {
        super(props);
        this.state = {
            username: "",
            password: ""
        };
    }

    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.title}>
                    Sign In
                </Text>
                <View>
                    <TextInput
                        placeholder="Username"
                        onChange={(event) => this.setState({username: event.nativeEvent.text})}
                        style={styles.formInput}
                        value={this.state.username} />
                    <TextInput
                        placeholder="Password"
                        secureTextEntry={true}
                        onChange={(event) => this.setState({password: event.nativeEvent.text})}
                        style={styles.formInput}
                        value={this.state.password} />
                    <TouchableHighlight onPress={(this.onSubmitPressed.bind(this))} style={styles.button}>
                        <Text style={styles.buttonText}>Submit</Text>
                    </TouchableHighlight>
                </View>
            </View>
        );
    }

    onSubmitPressed() {
        this.props.navigator.push({
            title: "Secure Page",
            component: SecureView,
            passProps: {username: this.state.username, password: this.state.password},
        });
    }

};

var styles = StyleSheet.create({
    container: {
        padding: 30,
        marginTop: 65,
        alignItems: "stretch"
    },
    title: {
        fontSize: 18,
        marginBottom: 10
    },
    formInput: {
        height: 36,
        padding: 10,
        marginRight: 5,
        marginBottom: 5,
        marginTop: 5,
        flex: 1,
        fontSize: 18,
        borderWidth: 1,
        borderColor: "#555555",
        borderRadius: 8,
        color: "#555555"
    },
    button: {
        height: 36,
        flex: 1,
        backgroundColor: "#555555",
        borderColor: "#555555",
        borderWidth: 1,
        borderRadius: 8,
        marginTop: 10,
        justifyContent: "center"
    },
    buttonText: {
        fontSize: 18,
        color: "#ffffff",
        alignSelf: "center"
    },
});

module.exports = LoginView;

Answer 4

你必须使用导航器。请阅读下面提到的文档。如果您需要，我会分享您的代码。

以下是一个示例：NavigatorExample

本地反应中打开另一个屏幕

4 个答案: