I am just starting to learn ReactNative and I cant seem to find the pertinent info on their tutorials page.
I have a list which is rendered on the page, each item in the list has an info button. When the info button is clicked, I want to render a new screen (component) which displays additional information about the item.
items-list.component.js:
render: function() {
let content;
if (this.state.dataSource._cachedRowCount > 0) {
// console.log('data render list')
content = (<View style={styles.container}>
<View style={globalStyles.header}>
<Text style={globalStyles.headerText}>Calls History</Text>
<Icon name="plus" size={24} color="#fff" style={{marginRight: 4}}/>
</View>
<ListView dataSource={this.state.dataSource}
renderRow={this.renderRow}>
</ListView>
</View>);
} else {
content = (<View><LoadingAnimation></LoadingAnimation></View>);
}
return (<View style={styles.container}>{content}</View>);
},
renderRow(rowData) {
//row contains item name, image displayed here:
<Image source = {{uri: rowData.peers[0].avatar}}
style={globalStyles.avatar} />
<View style ={styles.container}>
<Text style={styles.nameText} numberOfLines={1}>{rowData.peer}</Text>
<Text style={styles.rowText} numberOfLines={1}>{rowData.ts.date}</Text>
</View>
<TouchableHighlight onPress ={() => <CallsInfo callsData={rowData}/> }>
<Icon name="information" size={24} color="#9e9e9e" style={styles.rowIcon}/>
</TouchableHighlight>
calls-info.js:
var React = require('react-native');
var MyButton = React.createClass({
render() {
return (
<View>
<Text>{this.props.callsData}</Text>
</View>
)
},
});
What I want to do is when the TouchableHighLight is pressed, the user is taken to a new screen with the data passed to it.
I tried to do this on my own by passing CallsInfo, which is a component, to the button, but when I click it, nothing happens.
Thanks!
Good article about it.
You need to use navigator object to transition between different scenes in your app.
e.g in your App.js, renderScene can look like this:
renderScene(route) {
return (
<View style={[route.style]}>
<route.Page extras={route.props} />
</View>
)
}
And you can attach onPress handler with the following logic
onChangeRoute() {
this.navigator.push({Page: YourComponent, props: yourprops});
}
So your component will have an access to extras props by using:
this.props.extras in YourComponent
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments