Réagir natif de transmission de données à partir d'un écran à l'autre

Je suis en train d'apprendre comment utiliser réagir-native, donc je suis en train de monter une petite application qui récupère une liste d'utilisateurs à partir d'un serveur, l'affiche dans une listview et où appuyant sur une ligne ouvre un écran d'affichage des données de l'utilisateur.

- Je configurer un navigateur pour passer d'un écran à l'autre. Lors de l'appui sur la ligne je suis en mesure d'ouvrir un nouvel écran mais je ne peux pas comprendre comment passer des données de ce nouvel écran.

- Je configurer un navigateur dans index.android.js

import React from 'react';
import {
  AppRegistry,
  Navigator,
} from 'react-native';

import ContactList from './src/containers/ContactList.js';

function MyIndex() {
  return (
    <Navigator
      initialRoute={{ name: 'index', component: ContactList }}
      renderScene={(route, navigator) => {
        if (route.component) {
          return React.createElement(route.component, { navigator });
        }

        return undefined;
      }}
    />
  );
}

AppRegistry.registerComponent('reactest', () => MyIndex);

D'abord je l'affichage d'un écran avec un bouton et un vide listview (ContactList.js), après avoir appuyé sur le bouton, j'ai chercher un peu de données JSON qui sont utilisés pour mettre à jour le listview :

import React, { Component, PropTypes } from 'react';
import {
  Text,
  View,
  TouchableOpacity,
  TouchableHighlight,
  ListView,
  Image,
} from 'react-native';

import styles from '../../styles';
import ContactDetails from './ContactDetails';

const url = 'http://api.randomuser.me/?results=15&seed=azer';

export default class ContactList extends Component {
  static propTypes = {
    navigator: PropTypes.object.isRequired,
  }
  constructor(props) {
    super(props);

    const datasource = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 });
    this.state = {
      jsonData: datasource.cloneWithRows([]),
      ds: datasource,
    };
  }
  _handlePress() {
    return fetch(url)
      //convert to json
      .then((response) => response.json())
      //do some string manipulation on json
      .then(({ results }) => {
        const newResults = results.map((user) => {
          const newUser = {
            ...user,
            name: {
              title: `${user.name.title.charAt(0).toUpperCase()}${user.name.title.slice(1)}`,
              first: `${user.name.first.charAt(0).toUpperCase()}${user.name.first.slice(1)}`,
              last: `${user.name.last.charAt(0).toUpperCase()}${user.name.last.slice(1)}`,
            },
          };

          return newUser;
        });

        return newResults;
      })
      //set state
      .then((results) => {
        this.setState({
          jsonData: this.state.ds.cloneWithRows(results),
        });
      });
  }
  renderRow(rowData: string) {
    return (
      <TouchableHighlight
        onPress={() => {
          this.props.navigator.push({
            component: ContactDetails,
          });
        }}
      >
        <View style={styles.listview_row}>
          <Image
            source={{ uri: rowData.picture.thumbnail }}
            style={{ height: 48, width: 48 }}
          />
          <Text>
            {rowData.name.title} {rowData.name.first} {rowData.name.last}
          </Text>
        </View>
      </TouchableHighlight>
    );
  }
  render() {
    const view = (
      <View style={styles.container}>
        <TouchableOpacity
          onPress={() => this._handlePress()}
          style={styles.button}
        >
          <Text>Fetch results?</Text>
        </TouchableOpacity>
        <ListView
          enableEmptySections
          dataSource={this.state.jsonData}
          renderRow={(rowData) => this.renderRow(rowData)}
          onPress={() => this._handleRowClick()}
        />
      </View>
    );

    return view;
  }
}

Lorsqu'une ligne est pressé, il ouvre un nouvel écran ContactDetails.js, qui est censé afficher les données de l'utilisateur :

import React, {
} from 'react';

import {
  Text,
  View,
} from 'react-native';

import styles from '../../styles';

export default function ContactDetails() {
  return (
    <View style={styles.container}>
      <Text>{this.props.title}</Text>
      <Text>{this.props.first}</Text>
      <Text>{this.props.last}</Text>
    </View>
  );
}

À ce point, j'ai eu cette erreur :

pas défini n'est pas un objet (l'évaluation de cela.accessoires de jeu.titre')

J'ai essayé beaucoup de choses telles que :

this.props.navigator.push({
    component: ContactDetails,
    title: rowData.name.title,
    first: rowData.name.first,
    last: rowData.name.last,
});

ou

this.props.navigator.push({
    component: ContactDetails,
    props: {
        title: rowData.name.title,
        first: rowData.name.first,
        last: rowData.name.last,
    }
});

ou

this.props.navigator.push({
    component: ContactDetails,
    passProps: {
        title: rowData.name.title,
        first: rowData.name.first,
        last: rowData.name.last,
    }
});

Mais en vain.

J'ai aussi lu que je devrais utiliser redux. Suis-je en train de faire quelque chose de mal ?

EDIT: Le problème est ici :

<TouchableHighlight
    onPress={() => {
      this.props.navigator.push({
        component: ContactDetails,
      });
    }}
>

Je suppose que je dois passer certains paramètres de là, mais peu importe, j'ai essayé ci-dessus a échoué.

Double Possible de Transmettre des Données entre les Pages de Réagir natif
C'est dans l'autre sens :). Cette question est presque deux ans de plus que celui auquel vous vous référez.

OriginalL'auteur vincenth | 2016-07-29