陣營本地onpress成可觸摸開放的另一種模式

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

我需要在項目中這種方法其對我來說很重要，如果任何人能告訴我怎麼牛逼o請這樣做！

注：IAM初學者到反應本土:)

編輯

我想這碼 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> 
    ); 
    } 
} 

我得到了這個錯誤 未定義不是一個對象（評估'_this.props.navigator.push）

Answer 1

我已經創建了一個多屏幕解決方案。所以請閱讀我的代碼並按照您的要求執行，希望它能幫助您。鏈接這裏： Navigator sample

如果有任何問題，請問我。