React-native: pasar datos de una pantalla a otra
Estoy tratando de aprender a usar react-native, así que estoy poniendo una pequeña aplicación que busca una lista de usuarios de un servidor, la muestra en unlistview
y al presionar una fila se abre una pantalla que muestra los datos del usuario.
Configuré un navegador para ir de una pantalla a otra. Al presionar en la fila, puedo abrir una nueva pantalla, pero no puedo entender cómo pasar datos a esta nueva pantalla.
Configuré un navegador enindex.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);
Primero muestro una pantalla con un botón y una vista de lista vacía (ContactList.js), después de presionar el botón, obtengo algunos datos JSON que se utilizan para actualizar ellistview
:
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;
}
}
Cuando se presiona una fila, se abre una nueva pantallaContactDetails.js
, que se supone que muestra los datos del usuario:
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>
);
}
En este punto recibí este error:
undefined no es un objeto (evaluando 'this.props.title')
He intentado muchas cosas como:
this.props.navigator.push({
component: ContactDetails,
title: rowData.name.title,
first: rowData.name.first,
last: rowData.name.last,
});
o
this.props.navigator.push({
component: ContactDetails,
props: {
title: rowData.name.title,
first: rowData.name.first,
last: rowData.name.last,
}
});
o
this.props.navigator.push({
component: ContactDetails,
passProps: {
title: rowData.name.title,
first: rowData.name.first,
last: rowData.name.last,
}
});
Pero fue en vano.
También leí que debería usar redux. Estoy haciendo algo mal ?
EDITAR: El problema está aquí:
<TouchableHighlight
onPress={() => {
this.props.navigator.push({
component: ContactDetails,
});
}}
>
Supongo que debería pasar algunos parámetros allí, pero lo que intenté arriba falló.