Question

我将此模型导入react native，其名称为 LoginView.js

    "use strict";
     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() {
          //here !!
        }
      }

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;

在此模块中，我有一个名为move的方法，当点击进入touchable时，必须打开名为 test.js

的模块

    import React, { Component } from 'react';
import { AppRegistry, Text } from 'react-native';

class HelloWorldApp extends Component {
  render() {
    return (
      <Text>Hello world!</Text>
    );
  }
}

我在项目中需要这个方法对我来说非常重要，如果有人能告诉我该怎么做请！

注意：我初学者反应原生:)

修改

我试过这段代码 login.js

  "use strict";
     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.OnBUttonPress()}>
                    <Text style={styles.buttonText}>Login</Text>
                   </TouchableHighlight>
                    </View>
                </View>
            );
        }
 OnBUttonPress = () => {
      this.props.navigator.push({
        id: 'test'
      })
  }
    }

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;

AppRegistry.registerComponent('AwesomeProject', () => LoginView);

和这个test.js

import React, { Component } from 'react';
import {
  View,
  Text,
  TouchableHighlight,
} from 'react-native';

export default class WelcomeScreen extends Component {
  constructor(props) {
    super(props);
    this.state = {
      text: '<Your welcome in Second Screen>',
      textBack: '<Tap to Go Back to First Screen>'
    }
  }
  OnBUttonPress = () => {
      this.props.navigator.push({
        id: 'WelcomeScreen'
      })
  }

  render = () => {
    return (
        <View>
            <Text>{this.state.text}</Text>
            <TouchableHighlight onPress={this.OnBUttonPress}>
              <Text>{this.state.textBack}</Text>
            </TouchableHighlight>
       </View>
    );
  }
}

我收到了这个错误 undefined不是对象（评估'_this.props.navigator.push）

Answer 1

我为多个屏幕创建了一个解决方案。所以请阅读我的代码并按照您的要求实施，希望它能为您提供帮助。链接在这里： Navigator sample

如果有任何问题请问我。

React-native onpress成为可触摸开放的另一个模型

1 个答案: