प्रतिक्रियात्मक नेविगेटर

Question

प्रतिक्रिया दृश्य में Navigator के साथ दृश्य ए से दृश्य बी तक मैं डेटा कैसे पास कर सकता हूं?

मैं sceneB पर जाने के लिए इस का उपयोग कर रहा:

this.props.navigator.push({ 
    id: "MainPage", 
    name: 'mainPage' 
}); 

Answer 1

आप नाविक पर passProps प्रॉपर्टी सेट अप करने की जरूरत है। स्टैक ओवरफ़्लो पर कुछ हालिया उदाहरण हैं, विशेष रूप से here और here।

<Navigator 
    initialRoute={{name: 'Main', component: Main, index: 0}} 
    renderScene={(route, navigator) => { 
    return React.createElement(<YourComponent />, { ...this.props, ...route.passProps, navigator, route }); 
    }} /> 

या

<Navigator 
    initialRoute={{name: 'Main', component: Main, index: 0}} 
    renderScene={(route, navigator) => { 
     <route.component {...route.passProps} navigator={navigator} route={route} /> 
    } 
    } 
/> 

आप देख रहे हैं बस कार्यक्षमता को समझने के लिए व्यवस्था की सबसे बुनियादी के लिए, मैं एक परियोजना here कि आप संदर्भित कर सकते हैं की स्थापना की, और नीचे दिए गए कोड चिपकाया है।

'use strict'; 

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

class Two extends React.Component { 
    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> 
      <Text>name: {this.props.myVar}</Text> 
     </View> 
    ) 
    } 
} 

class Main extends React.Component { 
    gotoNext(myVar) { 
    this.props.navigator.push({ 
     component: Two, 
     passProps: { 
     id: 'page_user_infos', 
     name: 'page_user_infos', 
     myVar: myVar, 
     } 
    }) 
    } 

    render() { 
    return(
     <View style={{flex: 4, flexDirection: 'column', marginTop:100}}> 
     <TouchableHighlight style={{ height:40, borderWidth:1, marginBottom:10, backgroundColor: '#ddd'}} name='Pole' onPress={() => this.gotoNext('This is a property that is being passed') }> 
      <Text style={{textAlign:'center'}}>Go to next page</Text> 
     </TouchableHighlight> 
     </View> 
    ) 
    } 
} 

class App extends React.Component { 
    render() { 

    return (
     <Navigator 
       style={{flex:1}} 
      initialRoute={{name: 'Main', component: Main, index: 0}} 
      renderScene={(route, navigator) => { 
      if (route.component) { 
          return React.createElement(route.component, { ...this.props, ...route.passProps, navigator, route }); 
         } 
       }} 
      navigationBar={ 
      <Navigator.NavigationBar 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 null 
    } 
}; 


var styles = StyleSheet.create({ 

}); 

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

Answer 2

कभी कभी पास प्रोप (कम से कम मेरे लिए) काम नहीं करता है तो मैं क्या मैं

nav.push({ 
     id: 'MainPage', 
     name: 'LALA', 
     token: tok 
     }); 

तो अगले दृश्य में इसे उपयोग करने में मार्ग वस्तु अपने आप में इसे पारित है मैं का उपयोग

var token = this.props.navigator.navigationContext.currentRoute.token; 

हालांकि एक जटिल "पहुँच" की तरह है, लेकिन यह मूर्ख सबूत पास रंगमंच की सामग्री काम कर सकते हैं या नहीं भी इस तरह से आप भेजने की समस्या से मार्ग वस्तु में गुण ही इस प्रकार आप बचत पारित कर सकते हैं हो सकता है मैं एक अलग तरीके से टी।

यह सही तरीका नहीं हो सकता है लेकिन मुझे लगता है कि यह थोड़ा अधिक सुविधाजनक है।

Answer 3

मैं आपके नेविगेटर को this example के रूप में स्थापित करूँगा। अनिवार्य रूप से, नेविगेटर को अपने इंडेक्स दृश्य में रखें और वहां आवश्यक सभी आवश्यक घटक हैं। फिर, किसी नाम (या आईडी, जैसे आपने किया) के आधार पर सभी मार्गों को संभालने के लिए रेंडरसेन() फ़ंक्शन को परिभाषित करें। मैं घटक ऑब्जेक्ट का उपयोग उस चीज़ के रूप में नहीं करता जो कॉल से नेविगेटर पुश विधि में पास हो जाता है क्योंकि यदि आप ऐसा करते हैं तो आपको उस विशिष्ट दृश्य में घटक आयात करना होगा। मैं ऐसा करता था और कई समस्याओं में भाग गया था, इसलिए यदि आप किसी भी मुद्दे पर दौड़ते हैं, तो मैं आपको चेतावनी देता हूं, इस दृष्टिकोण पर विचार करें।

renderScene(route, navigator) { 
 

 
    if(route.name == 'root') { 
 
     return <Root navigator={navigator} /> 
 
    } 
 
    if(route.name == 'register') { 
 
     return <Register navigator={navigator} /> 
 
    } 
 
    if(route.name == 'login') { 
 
     return <Login navigator={navigator} /> 
 
    } 
 
    if(route.name == 'home') { 
 
     return <Home navigator={navigator} {...route.passProps} /> 
 
    } 
 
    if(route.name == 'update') { 
 
     return <Update navigator={navigator} {...route.passProps} /> 
 
    } 
 

 
    }

Answer 4

आप react-native-navigation उपयोग कर रहे हैं, बस वस्तु अपने पैरामीटर को passProps जोड़ने के लिए, documentation के अनुसार।

उदा .:

this.props.navigator.push({ 
    screen: 'example.Screen', 
    title: 'Screen Title', 
    passProps: { 
    id: 'MainPage', 
    name: 'mainPage' 
    } 
}) 

Answer 5

तुम भी sceneA पैरामीटर पारित कर सकते हैं नीचे दिए तरीक़े का उपयोग कर sceneB करने के लिए। मान लें कि _handlePressOnClick() कुछ बटन पर लिखा गया है SceneA स्क्रीन पर क्लिक करें।

_handlePressOnClick(){ //this can be anything 
this.props.navigator.push({ 
    name: "sceneB", //this is the name which you have defined in _renderScene 
    otherData: { 
     dataA: "data1" 
    } 
}) 
} 

फिर अपने _renderScene में डेटा परिभाषित जहां इस तरह

_renderScene(route, navigator) {   
    switch(route.name) { 
     case "sceneA": 
      return (
       <sceneA navigator={navigator} /> 
      ); 
     break; 
     case "sceneB": 
      return (
       <sceneB navigator={navigator} otherData={route.otherData}/> 
      ); 
     break; 
    } 

अपने विचार sceneB में इस

import sceneA from './sceneA'; 
import sceneB from './sceneB'; 

तरह फ़ाइलें आयात करने अब मत भूलना की तरह अपने नाविक को लागू किया है फ़ाइल आप

var {dataA} = this.props.otherData; 

or 

constructor(props){ 
    super(props); 
    this.state={ 
    otherData: this.props.otherData 
    } 
} 

के बाद अपना अन्य डेटा एक्सेस कर सकते हैं

फिर अपनी रेंडर() विधि में आप राज्य का उपयोग करके अन्य डेटा तक पहुंच सकते हैं।

<Text>{this.state.otherData.dataA}</Text> 

आप रेडक्स का उपयोग करके वैश्विक स्तर की स्थिति को बनाए रखने के लिए भी उपयोग कर सकते हैं जो क्रिया के माध्यम से सुलभ है और स्वचालित रूप से प्रोप करता है।

Answer 6

1. दृश्य ए से दृश्य बी को डेटा पास करते समय, आपको नेविगेटर टैग में निर्दिष्ट करना होगा कि आप मार्ग के साथ डेटा भी पास कर रहे हैं। पूर्व।

if(route.name == 'home') { 
     return <Home navigator={navigator} data={route.data} /> 
    } 

दृश्य ए पूर्व से डेटा भेजें। this.props.navigator.push({name:'sceneB',data:{name:this.state.name},});

दृश्य बी में इस पूर्व जैसे डेटा का उपयोग करें। this.props.data.name और आपको दृश्य ए से दृश्य बी