反應原生按鈕點擊移動到另一個屏幕

我是新來反應native.I需要簡單的場景在這裏點擊按鈕轉到新屏幕。陣營本土點擊按鈕移動到另一個屏幕我想這反應原生按鈕點擊移動到另一個屏幕

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

}

來源

2016-02-11 SahanS

實施例：

寫入下一個代碼到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;

來源

2016-02-11 18:59:03

感謝您的迴應。它不給任何錯誤。只是給我簡單的layout.not顯示按鈕。有沒有什麼安裝NavigatorIOS – SahanS

是最後它的工作。感謝很多 – SahanS