React-native onPress in berührbaren offen ein anderes Modell

Question

Ich habe dieses Modell in react native die 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; 

in diesem Modul nennen i Methode move genannt haben, wenn sie in touchable bewegen klicken muss dieses Modul öffnen dass Name test.js

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

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

ich brauche diese Methode in Projekt für mich seine sehr wichtig, wenn jemand mir sagen kann, wie t o mach das bitte !!

Hinweis: iam Anfänger in reagieren native :)

bearbeiten

ich diesen Code versucht 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); 

und diese 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> 
    ); 
    } 
} 

Ich habe diesen Fehler undefined ist kein Objekt (evaluating'_this.props.navigator.push)

Answer 1

Ich habe eine Lösung für mehrere Bildschirme erstellt. also bitte lesen sie meinen code und implementieren sie als ihre anforderung hoffe es wird dir helfen. Link hier: Navigator sample

wenn irgendein Problem bitte fragen Sie mich.