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é.
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
Vous devez vous connecter pour publier un commentaire.
Donc le problème semble se situer ici:
Dans le renderScene fonction, vous ne recevez pas la route (et l'utilisation de la route.composant) mais vous ne passez pas votre chemin.d'accessoires ou de route.passProps ou ce que jamais vous voulez l'appeler! Et de ce que je vois dans la source du Navigateur, à ce moment, vous devriez avoir le parcours de l'objet que vous avez créé. Donc, vous devriez être en mesure de passer vos accessoires le long.
Par exemple:
Vous pouvez également le programme d'installation redux, mais ce n'est pas une exigence. Si votre application est plus grand que vous devriez vraiment envisager l'utilisation d'un magasin externe!
Mise à jour:
Il y a aussi un autre problème.
Vous utilisez un des composants fonctionnels. Composants fonctionnels n'ont pas
this
. Ils reçoivent les accessoires en paramètre.De sorte qu'il devrait être comme ceci:
Vous avez réellement besoin à la fois. Votre renderScene heure actuelle, la fonction ne passe pas les paramètres. Voir l'exemple, j'ai étalé la route.accessoires pour le composant. Donc, si vous l'appelez "accessoires" dans le navigateur.poussez vous avez besoin pour passer des accessoires renderScene. Si vous l'appelez passProps vous devez passer passProps.
voir ma mise à jour. J'ai trouvé un autre problème avec votre ContactDetails Composant.
Merci beaucoup, je viens de faire ce travail à l'aide de vos corrections. Beaucoup apprécié, j'ai passé la meilleure partie de l'après-midi 🙂
OriginalL'auteur Hugo Dozois
Je ressens toujours de la navigation par défaut est à la lourdeur. Je vous suggère fortement d'utiliser cette bibliothèque pour le routage: https://github.com/aksonov/react-native-router-flux
OriginalL'auteur Shivam Sinha
Remplacer le code :
Avec :
C'est très bien:
OriginalL'auteur Brijmohan Karadia