मूल बटन पर क्लिक करें किसी अन्य स्क्रीन पर जाएं

Question

मैं मूल प्रतिक्रिया करने के लिए नया हूं। मुझे क्लिक बटन द्वारा नई स्क्रीन पर जाने के लिए सरल परिदृश्य की आवश्यकता है। एक और स्क्रीन के मूल निवासी बटन क्लिक कदम प्रतिक्रिया मैं इस

<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

उदाहरण:

लिखने अगले कोड 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; 

Answer 2

आप एक navigator घटक स्थापना की, और navigator.push समारोह उपयोग करने की आवश्यकता की कोशिश की। This उत्तर आपको इसके माध्यम से चलना चाहिए।

Answer 3

यदि आप इसे सरल बनाना चाहते हैं, आप इस पैकेज का उपयोग कर सकते हैं: https://github.com/react-native-simple-router-community/react-native-simple-router