Comment passer des données d'un écran à l'autre dans React Native ?

Question

1. index.Android.js

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  TextInput,
  View
} from 'react-native';

import Button from 'react-native-button';

class AwesomeProject extends Component {

constructor(props){
super(props)

this.state = {
  username: '',
  email: '',
  address: '',
  mobileNumber: ''
 }

  render() {
    return (
      <View style={styles.container}>

      <TextInput
      ref={component => this.txt_input_name = component}
      style={styles.textInputStyle}
      placeholder="Enter Name"
      returnKeyLabel = {"next"}
      onChangeText={(text) => this.setState({username:text})}
      />

      <Button style={styles.buttonStyle}>
      Submit
      </Button> 
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
 buttonStyle: {
   alignSelf: 'center',
   textAlign: 'center',
   color: '#FFFFFF', 
   fontSize:18,
   marginTop:20,
   marginBottom:20,
   padding:5,
   borderRadius:5,
   borderWidth:2,
   width:100,
   alignItems: 'center',
   backgroundColor:'#4285F4',
   borderColor:'#000000'
}
});

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

Answer 1

Vous devez passer les props à une autre page en utilisant le navigateur.

 this.props.navigator.push({
    name: 'Home',
    passProps: {
      name: property
    }
  })

Je l'ai pris de ce lien https://medium.com/@dabit3/react-native-navigator-navigating-like-a-pro-in-react-native-3cb1b6dc1e30#.6yrqn523n

Answer 2

Initialement

import {Navigator}

Définir le navigateur à l'intérieur du

Rendu

fonction de

index.Android.js

comme ceci

render() {
    return (
      <Navigator
          initialRoute={{id: 'HomePage', name: 'Index'}}
          renderScene={this.renderScene.bind(this)}
          configureScene={(route) => {
            if (route.sceneConfig) {
              return route.sceneConfig;
            }
            return Navigator.SceneConfigs.FloatFromRight;
          }} />
    );
}

Définissez alors le

fonction renderscene

comme ceci

renderScene(route, navigator) {
    var routeId = route.id;
    if (routeId === 'HomePage') {
      return (
        <HomePage
          navigator={navigator} />
      );
    }
    if (routeId === 'DetailPage') {
      return (
        <DetailPage
          navigator={navigator}

          {...route.passProps} 
          />
      );
    }

}

Spécifier la propriété

{...route.passProps}

pour transmettre des valeurs à un écran. Ici, je l'ai donné à l'intérieur du DetailPage

Vous pouvez alors utiliser

passProps

pour appeler la page suivante. Dans mon cas

Page de détail

this.props.navigator.push({
      id: 'DetailPage',
      name: 'DetailPage',
      passProps: {
      name:value

    }
});