नेविगेटर के लिए पासप्रॉप समकक्ष?

Question

मैं नेविगेटर आईओएस से नेविगेटर में कनवर्ट करने की कोशिश कर रहा हूं और ऐसा लगता है कि पासप्रॉप कैसे काम करना है। मैं दो चर, एलआरए और अगले दृश्य में ईमेल करने की कोशिश कर रहा हूं, लेकिन मैं अपरिभाषित हो रहा हूं। मैं इसके लिए बहुत नया हूं इसलिए मुझे खेद है कि यह एक आसान सवाल है। यहां मेरा कोड अभी तक है, मुझे कोई अन्य सुझाव देने के लिए स्वतंत्र महसूस करें जो आप इसके साथ गलत देखते हैं!

DataEntry.js

class DataEntry extends Component { 
    constructor(props) { 
     super(props); 
     this.state = { 
      emailString: 'default@gmail.com', 
      isLoading: false, 
      message: '', 
     mailerror: false, 
     lraerror: false 
     }; 
    } 

    onEmailTextChanged(event) { 
    this.setState({ emailString: event.nativeEvent.text }); 
    if (!validateEmail(this.state.emailString)){ 
     this.emailError = "Please enter a valid email" 
     this.setState({error: true}) 
    } 
    else{ 
     this.emailError = "" 
     this.setState({error: false}) 
    } 
    } 

    onLRATextChanged(event) { 
    this.setState({ LRAString: event.nativeEvent.text }); 
    if (!isValidID(this.state.LRAString)){ 
     this.LRAError = "Valid LRA ID is 4-10 alphanumeric characters" 
     this.setState({error: true}) 
    } 
    else{ 
     this.LRAError = "" 
     this.setState({error: false}) 
    } 
    } 

    gotoNext() { 
    var emailtext = this.state.emailString 
    var LRAtext = this.state.LRAString 
    console.log(emailtext) 
    this.props.navigator.push({ 
     id: 'PasswordView', 
     name: 'Generated Password', 
     email: emailtext, 
     LRA: LRAtext 
    }); 
    } 

    renderScene(route, navigator) { 
    var email = this.state.emailString 
    var LRA = this.state.LRAString 
    return ( 
     <View style={styles.container}> 
      <Text style={styles.description}> 
       Please enter the email and LRA 
      </Text> 

      <View style={styles.flowRight}> 
       <TextInput 
       style={styles.searchInput} 
       value={this.state.emailString} 
       onChange={this.onEmailTextChanged.bind(this)} 
       placeholder='Enter Email'/> 
      </View> 

      <Text style={styles.error}> 
       {this.emailError} 
      </Text> 

      <View style={styles.flowRight}> 
       <TextInput 
       style={styles.searchInput} 
       value={this.state.LRAString} 
       onChange={this.onLRATextChanged.bind(this)} 
       placeholder='Enter LRA ID'/> 
      </View> 

      <Text style={styles.error}> 
       {this.LRAError} 
      </Text> 


      <TouchableHighlight style={styles.button} 
       underlayColor='#99d9f4' 
       onPress={this.gotoNext.bind(this)}> 
       <Text style={styles.buttonText}>Retrieve Password</Text> 
      </TouchableHighlight> 
     <Text style={styles.description}>{this.state.message}</Text> 
     </View> 
    ); 
    } 
render() { 
     return (
      <Navigator 
      renderScene={this.renderScene.bind(this)} 
      navigator={this.props.navigator} 
      navigationBar={ 
      <Navigator.NavigationBar style={{backgroundColor: '#48BBEC', alignItems: 'center'}} 
       routeMapper={NavigationBarRouteMapper} /> 
      } /> 
     ); 
     } 
} 

var NavigationBarRouteMapper = { 
    LeftButton(route, navigator, index, navState) { 
    return null; 
    }, 
    RightButton(route, navigator, index, navState) { 
    return null; 
    }, 
    Title(route, navigator, index, navState) { 
    return (
     <TouchableOpacity style={{flex: 1, justifyContent: 'center'}}> 
     <Text style={{color: 'white', margin: 10, fontSize: 16}}> 
      Data Entry 
     </Text> 
     </TouchableOpacity> 
    ); 
    } 
}; 


module.exports = DataEntry; 

Answer 1

आपको शायद अपने नेविगेटर को अपने घटक में अलग करने की आवश्यकता है, तो आप आवश्यकतानुसार नेविगेटर पर आवश्यक गुणों को असाइन कर सकते हैं (इस मामले में, ... path.passProps ऑपरेटर को संपत्ति सेट करने के लिए पासपोर्ट नेविगेटर द्वारा उपयोग करें)।

मैंने आपके कोड herehttps://rnplay.org/apps/V_EhdA के साथ प्रोजेक्ट सेट अप किया है।

नीचे वह कोड है जिसका उपयोग मैं इसे काम करने के लिए करता था।

'use strict'; 

var React = require('react-native'); 
var { 
    AppRegistry, 
    StyleSheet, 
    Text, 
    View, 
    TouchableOpacity, 
    TextInput, 
    Navigator, 
    TouchableHighlight 
} = React; 

function isValidID(string) { 
    return true 
} 

var Two = React.createClass({ 
    render(){ 
    return(
     <View style={{marginTop:100}}> 
      <Text style={{fontSize:20}}>Hello From second component</Text> 
      <Text>id: {this.props.id}</Text> 
      <Text>name: {this.props.name}</Text> 
     </View> 
    ) 
    } 
}) 

var Main = React.createClass ({ 

    getInitialState() { 
     return { 
      emailString: 'default@gmail.com', 
      isLoading: false, 
      message: '', 
      mailerror: false, 
      lraerror: false 
     } 
    }, 

    onEmailTextChanged(event) { 
    this.setState({ emailString: event.nativeEvent.text }); 
    if (!validateEmail(this.state.emailString)){ 
     this.emailError = "Please enter a valid email" 
     this.setState({error: true}) 
    } 
    else{ 
     this.emailError = "" 
     this.setState({error: false}) 
     } 
    }, 

    onLRATextChanged(event) { 
    this.setState({ LRAString: event.nativeEvent.text }); 
    if (!isValidID(this.state.LRAString)){ 
     this.LRAError = "Valid LRA ID is 4-10 alphanumeric characters" 
     this.setState({error: true}) 
    } 
    else{ 
     this.LRAError = "" 
     this.setState({error: false}) 
    } 
    }, 

    gotoNext() { 
    var emailtext = this.state.emailString 
    var LRAtext = this.state.LRAString 
    this.props.navigator.push({ 
     passProps: { 
      id: 'PasswordView', 
      name: 'Generated Password', 
      email: this.state.emailstring, 
      LRA: LRAtext, 
     }, 
     component: Two 
    }); 
    }, 

    render() { 
     var email = this.state.emailString 
     var LRA = this.state.LRAString 
     return (
     <View style={styles.container}> 
      <Text style={styles.description}> 
       Please enter the email and LRA 
      </Text> 

      <View > 
       <TextInput 
       style={{height:40}} 
       value={this.state.emailString} 
       onChange={this.onEmailTextChanged.bind(this)} 
       placeholder='Enter Email'/> 
      </View> 

      <Text > 
       {this.emailError} 
      </Text> 

      <View > 
       <TextInput 
       style={{height:40}} 
       value={this.state.LRAString} 
       onChange={this.onLRATextChanged.bind(this)} 
       placeholder='Enter LRA ID'/> 
      </View> 

      <Text> 
       {this.LRAError} 
      </Text> 

      <TouchableHighlight style={{padding:30}} 
       underlayColor='#99d9f4' 
       onPress={() => this.gotoNext() }> 
       <Text>Retrieve Password</Text> 
      </TouchableHighlight> 

     <Text >{this.state.message}</Text> 
     </View> 
    ); 
} 
}) 

class DataEntry extends React.Component { 
    constructor(props) { 
     super(props); 
    } 
     render() { 
     return (
      <Navigator 
      configureScene={() => { 
         return Navigator.SceneConfigs.FloatFromRight; 
        }} 
      initialRoute={{name: 'ComponentName', component: Main, index: 0}} 
      renderScene={(route, navigator) => { 
      if (route.component) { 
          return React.createElement(route.component, { ...this.props, ...route.passProps, navigator, route }); 
         } 
     }} 

      navigationBar={ 
      <Navigator.NavigationBar 
      style={{backgroundColor: '#48BBEC', alignItems: 'center'}} 
       routeMapper={NavigationBarRouteMapper} /> 
      } /> 
     ); 
     } 
} 

var NavigationBarRouteMapper = { 
    LeftButton(route, navigator, index, navState) { 
    if(index > 0) { 
     return (
     <TouchableHighlight style={{marginTop: 10}} onPress={() => { 
      if (index > 0) { 
       navigator.pop(); 
      } 
     }}> 
     <Text>Back</Text> 
    </TouchableHighlight> 
)} else { 
return null} 
}, 
    RightButton(route, navigator, index, navState) { 
    return null; 
    }, 
    Title(route, navigator, index, navState) { 
    return (
     <TouchableOpacity style={{flex: 1, justifyContent: 'center'}}> 
     <Text style={{color: 'white', margin: 10, fontSize: 16}}> 
      Data Entry 
     </Text> 
     </TouchableOpacity> 
    ); 
    } 
}; 

var styles = StyleSheet.create({ 
    container: {flex:1}, 
    description: {flex:1} 
}) 

AppRegistry.registerComponent('DataEntry',() => DataEntry); 

Answer 2

मैं उसके साथ नहीं अनुभव कर रहा हूँ मूल निवासी प्रतिक्रिया अभी तक, तो यह सबसे अच्छा अभ्यास नहीं हो सकता है, लेकिन मैं

renderScene: function(route, navigator) { 
    return (
    <route.component route={route} navigator={navigator} /> 
); 
} 

कहाँ route.component कर सकते हैं के साथ समाप्त हो गया अपनी स्क्रीन में से कोई भी हो (मुख्य दृश्य)।

और फिर, नेविगेटर पर ही राज्य की स्थापना के बाद से यह अपने आप ही राज्य है और यह अब हर दृश्य के लिए एक आधार के रूप में पारित हो जाता है:

this.props.navigator.setState({isLoading: true});

कुछ हद तक यह एक उच्च आदेश घटक है करने के लिए

।