react-native - style - textinput react native

Reactiva las propiedades del Native Pass en el navegador

Question

Estoy usando NavigatorIOS en mi aplicación nativa de reacción. Quiero pasar algunas propiedades al navegar de nuevo a la ruta anterior.

Un caso de ejemplo: estoy en una página de formulario. Después de enviar los datos, quiero volver a la ruta anterior y hacer algo en función de los datos enviados

¿Cómo debo hacer eso?

Answer 1

¿Podría pasar una función de devolución de llamada en los accesorios del navegador cuando empuja la nueva ruta y la llama con los datos del formulario antes de pasar a la ruta anterior?

Answer 2

Ejemplo de código que muestra cómo utilizar una devolución de llamada antes del pop. Esto es específicamente para Navigator y no para NavigatorIOS, pero también se puede aplicar un código similar para eso.

Tienes página 1 y página 2. Estás presionando de Página1 a Página2 y luego regresas a la Página1. Debe pasar una función de devolución de llamada de la Página2 que activa algún código en la Página1 y solo después volverá a la Página1.

En Página1 -

_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)
},

En la página 2 -

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

La función "callbackFunction" se llamará antes de "pop". Para NavigatorIOS debe hacer la misma devolución de llamada en "passProps". También puede pasar args a esta devolución de llamada. Espero eso ayude.

Answer 3

Para NavigatorIOS también puede usar replacePreviousAndPop ().

Código:

''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);

Puede encontrar el ejemplo de trabajo aquí: https://rnplay.org/apps/JPWaPQ

¡Espero que eso ayude!

Answer 4

Puede usar AsyncStorage , guardar algo de valor en el componente secundario y luego llamar a navigator.pop () :

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

En el componente principal puede leerlo desde AsyncStorage:

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

Answer 5

Tuve el mismo problema con el navegador React Native que logré resolver utilizando EventEmitters y Subscribables. Este ejemplo aquí fue realmente útil: https://colinramsay.co.uk/2015/07/04/react-native-eventemitters.html

Todo lo que necesitaba hacer era actualizar para ES6 y la última versión de React Native.

Nivel superior de la aplicación:

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);

En la función _renderScene de tu navegador, asegúrate de incluir la prop "eventos":

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

Y aquí está el código para el componente FooScreen que representa una vista de lista.

(Tenga en cuenta que react-mixin se usó aquí para suscribirse al evento. En la mayoría de los casos, los mixins deben evitarse en favor de componentes de orden superior, pero en este caso no pude encontrar una forma de evitarlos):

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);

Finalmente. Necesitamos realmente emitir ese evento después de guardar un Foo:

En tu componente NewFooForm.js deberías tener un método como este:

  _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
  }