मैं अपने मूल एप्लिकेशन प्रतिक्रिया पर NavigatorIOS उपयोग कर रहा हूँ नाविक पॉप

Question

पर प्रतिक्रिया मूल निवासी दर्रा गुण। पिछले मार्ग पर नेविगेट करते समय मैं कुछ गुणों को पास करना चाहता हूं।

एक उदाहरण मामला: मैं एक फार्म पेज में हूँ। डेटा जमा करने के बाद, मैं पिछले रूट करने के लिए वापस जाएँ और सबमिट किए गए डेटा

मुझे लगता है कि क्या करना चाहिए कैसे के आधार पर कुछ करना चाहता हूँ?

Answer 1

आप जब आप नए मार्ग धक्का और कॉल कि प्रपत्र डेटा के साथ इससे पहले कि आप पिछले रूट करने के लिए पॉप नाविक रंगमंच की सामग्री पर एक कॉलबैक समारोह पारित कर सकता है?

Answer 2

कोड का नमूना कैसे पॉप से ​​पहले एक कॉलबैक उपयोग करने के लिए दिखा। यह विशेष रूप से नेविगेटर के लिए है और नेविगेटर आईओएस नहीं है लेकिन इसी तरह के कोड भी इसके लिए लागू किया जा सकता है।

आप पृष्ठ 1 और पृष्ठ 2 की है। आप पेज 1 से पेज 2 तक दबा रहे हैं और फिर पेज 1 पर वापस आ रहे हैं। आपको पेज 2 से कॉलबैक फ़ंक्शन पास करना होगा जो पेज 1 में कुछ कोड ट्रिगर करता है और इसके बाद ही आप पेज 1 पर वापस आ जाएंगे।

पृष्ठ 1 में -

_goToPage2: function() { 
    this.props.navigator.push({ 
    component: Page2, 
    sceneConfig: Navigator.SceneConfigs.FloatFromBottom, 
    title: 'hey', 
    callback: this.callbackFunction, 
    }) 
}, 

callbackFunction: function(args) { 
    //do something 
    console.log(args) 
}, 

पृष्ठ 2 में -

_backToPage1: function() { 
    this.props.route.callback(args); 
    this.props.navigator.pop(); 
}, 

समारोह "callbackFunction" से पहले "पॉप" बुलाया जाएगा। नेविगेटर आईओएस के लिए आपको "पासप्रॉप" में एक ही कॉलबैक करना चाहिए। आप इस कॉलबैक में भी तर्क दे सकते हैं। आशा करता हूँ की ये काम करेगा।

Answer 3

नेविगेटरआईओएस के लिए आप replacePreviousAndPop() को भी बदल सकते हैं।

कोड:

'use strict'; 

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

var MainApp = React.createClass({ 
    render: function() { 
    return (
     <NavigatorIOS 
      style={styles.mainContainer} 
      initialRoute={{     
      component: FirstScreen, 
      title: 'First Screen', 
      passProps: { text: ' ...' }, 
     }} 
     /> 
    ); 
    }, 
}); 

var FirstScreen = React.createClass({ 
    render: function() { 
    return (
     <View style={styles.container}> 
     <Text style={styles.helloText}> 
       Hello {this.props.text} 
     </Text> 
     <TouchableOpacity 
      style={styles.changeButton} onPress={this.gotoSecondScreen}> 
      <Text>Click to change</Text> 
     </TouchableOpacity>  
     </View> 
    ); 
    }, 
    gotoSecondScreen: function() { 
     console.log("button pressed"); 
    this.props.navigator.push({ 
     title: "Second Screen", 
     component: SecondScreen 
    }); 
    }, 
}); 

var SecondScreen = React.createClass({ 
    render: function() {  
    return (
     <View style={styles.container}> 
     <Text style={styles.helloText}> 
      Select a greeting 
     </Text> 
     <TouchableOpacity 
      style={styles.changeButton} onPress={() => this.sayHello("World!")}> 
      <Text>...World!</Text> 
     </TouchableOpacity> 
     <TouchableOpacity 
      style={styles.changeButton} onPress={() => this.sayHello("my Friend!")}> 
      <Text>...my Friend!</Text> 
     </TouchableOpacity> 
     </View> 
    ); 
    }, 
    sayHello: function(greeting) { 
     console.log("world button pressed"); 
    this.props.navigator.replacePreviousAndPop({ 
     title: "First Screen", 
     component: FirstScreen, 
     passProps: {text: greeting} 
    }); 
    } 
}); 


var styles = StyleSheet.create({ 
    mainContainer: { 
     flex: 1, 
     backgroundColor: "#eee" 
    }, 
    container: { 
    flex: 1, 
    alignItems: "center", 
    justifyContent: "center", 
    marginTop: 50,  
    }, 
    helloText: { 
    fontSize: 16, 
    }, 
    changeButton: { 
    padding: 5, 
    borderWidth: 1, 
    borderColor: "blue", 
    borderRadius: 4, 
    marginTop: 20 
    } 
}); 



AppRegistry.registerComponent("TestApp",() => MainApp); 

आप यहाँ काम कर रहे उदाहरण मिल सकते हैं: https://rnplay.org/apps/JPWaPQ

मुझे आशा है कि मदद करता है!

Answer 4

मुझे रिएक्ट नेटिव के नेविगेटर के साथ एक ही समस्या थी जिसे मैंने EventEmitters और Subscribables का उपयोग करके हल करने में कामयाब रहे। यह उदाहरण यहां वास्तव में सहायक था: https://colinramsay.co.uk/2015/07/04/react-native-eventemitters.html

मुझे बस इतना करना था कि ES6 और प्रतिक्रिया मूल के नवीनतम संस्करण के लिए अद्यतन किया गया था।

अनुप्रयोग के शीर्ष स्तर:

import React, { Component } from 'react'; 
import {AppRegistry} from 'react-native'; 
import {MyNavigator} from './components/MyNavigator'; 
import EventEmitter from 'EventEmitter'; 
import Subscribable from 'Subscribable'; 

class MyApp extends Component { 
    constructor(props) { 
     super(props); 
    } 
    componentWillMount() { 
     this.eventEmitter = new EventEmitter(); 
    } 
    render() { 
    return (<MyNavigator events={this.eventEmitter}/>); 
    } 
} 

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

अपने नाविक की _renderScene समारोह में, सुनिश्चित करें कि आप "घटनाओं" प्रोप शामिल करना:

_renderScene(route, navigator) { 
    var Component = route.component; 
    return (
     <Component {...route.props} navigator={navigator} route={route} events={this.props.events} /> 
    ); 
} 

और यहाँ FooScreen के लिए कोड है घटक जो एक सूचीदृश्य प्रस्तुत करता है।

(उच्च आदेश घटकों के पक्ष में ध्यान दें कि react-mixin आदेश घटना की सदस्यता के लिए यहां इस्तेमाल किया गया था ज्यादातर मामलों में mixins should be eschewed लेकिन मैं इस मामले में यह चारों ओर एक तरह से नहीं मिल सका।):

import React, { Component } from 'react'; 
import { 
    StyleSheet, 
    View, 
    ListView, 
    Text 
} from 'react-native'; 
import {ListItemForFoo} from './ListItemForFoo'; 
import reactMixin from 'react-mixin' 
import Subscribable from 'Subscribable'; 

export class FooScreen extends Component { 
    constructor(props) { 
    super(props); 

    this._refreshData = this._refreshData.bind(this); 
    this._renderRow = this._renderRow.bind(this); 

    var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}); 

    this.state = { 
     dataSource: ds.cloneWithRows([]) 
    } 
    } 

    componentDidMount(){ 
    //This is the code that listens for a "FooSaved" event. 
    this.addListenerOn(this.props.events, 'FooSaved', this._refreshData); 
    this._refreshData(); 
    } 

    _refreshData(){ 
    this.setState({ 
     dataSource: this.state.dataSource.cloneWithRows(//YOUR DATASOURCE GOES HERE) 
    }) 
    } 
    _renderRow(rowData){ 
     return <ListItemForFoo 
      foo={rowData} 
      navigator={this.props.navigator} />; 
    } 
    render(){ 
    return(
     <ListView 
     dataSource={this.state.dataSource} 
     renderRow={this._renderRow} 
     /> 
    ) 

    } 
} 
reactMixin(FooScreen.prototype, Subscribable.Mixin); 

अंत में।हम वास्तव में एक फू बचाने के बाद उस घटना का उत्सर्जन करने की जरूरत है:,

_onPressButton(){ 
    //Some code that saves your Foo 

    this.props.events.emit('FooSaved'); //emit the event 
    this.props.navigator.pop(); //Pop back to your ListView component 
    } 

Answer 5

आप AsyncStorage उपयोग कर सकते हैं बच्चे घटक पर कुछ मूल्य को बचाने:

अपने NewFooForm.js घटक में आप इस तरह की एक विधि होनी चाहिए और फिर navigator.pop() फोन:

AsyncStorage.setItem('postsReload','true'); 
this.props.navigator.pop(); 

माता पिता घटक में आप AsyncStorage से पढ़ सकते हैं:

async componentWillReceiveProps(nextProps) { 
    const reload = await AsyncStorage.getItem('postsReload'); 
    if (reload && reload=='true') 
    { 
     AsyncStorage.setItem('postsReload','false'); 
     //do something 
    } 
    }