React natywny przycisk kliknij, aby przejść do innego ekranu

Question

Jestem nowy, aby reagować native.I potrzebujesz prosty scenariusz tutaj klikając przycisk Przejdź do nowego ekranu. React natywną przycisk kliknij przycisk Przenieś do innego ekranu Próbowałem to

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

} 

Answer 1

Przykład:

zapisu następny kod 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); 

w pliku "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; 

ten kod w pliku „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; 

Answer 2

Musisz skonfigurować komponent navigator, i użyć funkcji navigator.push. This odpowiedź powinna Cię przez to przejść.

Answer 3

Jeśli chcesz to proste, możesz użyć tego pakietu: https://github.com/react-native-simple-router-community/react-native-simple-router