sptra sptra - 5 months ago 282
iOS Question

Select a row in ListView react-native to get detail

i'm new in react-native. I saw an example in https://facebook.github.io/react-native/docs/sample-application-movies.html .
It is building a movies app that fetch movies and display them in a ListView. How can we select a row to get its detail data and display it in other view? Please help. thanks :)

Here's what i've done so far:



/**
* Sample React Native App
* https://github.com/facebook/react-native
*/

import React, {
Component,
} from 'react';
import {
AppRegistry,
Image,
ListView,
StyleSheet,
Text,
View,
Navigator,
TouchableOpacity,
} from 'react-native';

var REQUEST_URL = 'https://raw.githubusercontent.com/facebook/react-native/master/docs/MoviesExample.json';

var SCREEN_WIDTH = require('Dimensions').get('window').width;
var BaseConfig = Navigator.SceneConfigs.FloatFromRight;

var CustomLeftToRightGesture = Object.assign({}, BaseConfig.gestures.pop, {

snapVelocity: 8,
edgeHitWidth: SCREEN_WIDTH,
});

var CustomSceneConfig = Object.assign({}, BaseConfig, {
springTension: 100,
springFriction: 1,
gestures: {
pop: CustomLeftToRightGesture,
}
});

var PageOne = React.createClass({
getInitialState:function(){
return{
dataSource: new ListView.DataSource({
rowHasChanged: (row1, row2) => row1 !== row2,
}),
loaded: false,
}
},

componentDidMount() {
this.fetchData();
},

fetchData() {
fetch(REQUEST_URL)
.then((response) => response.json())
.then((responseData) => {
this.setState({
dataSource: this.state.dataSource.cloneWithRows(responseData.movies),
loaded: true,
});
})
.done();
},

render() {
if (!this.state.loaded) {
return this.renderLoadingView();
}

return (
<ListView
dataSource={this.state.dataSource}
renderRow={this.renderMovie}
style={styles.listView}
/>
);
},

renderLoadingView() {
return (
<View style={styles.container}>
<Text>
Loading movies...
</Text>
</View>
);
},

renderMovie(movie) {
title1 = movie.title;
year1 = movie.year;

return (
<TouchableOpacity onPress={this._handlePressList}>
<View style={styles.container}>
<Image
source={{uri: movie.posters.thumbnail}}
style={styles.thumbnail}
/>
<View style={styles.rightContainer}>
<Text style={styles.title}>{movie.title}</Text>
<Text style={styles.year}>{movie.year}</Text>
</View>
</View>
</TouchableOpacity>
);
},

_handlePressList(){
this.props.navigator.push({id: 2, title1, year1});
},
});

var PageTwo = React.createClass({
render(){
return(
<View style={styles.rightContainer}>
<Text style={styles.title}>{title1}</Text>
<Text style={styles.year}>{year1}</Text>
</View>
)
}
})
class SampleAppMovies extends Component{
_renderScene(route, navigator) {
if (route.id === 1) {
return <PageOne navigator={navigator} />
} else if (route.id === 2) {
return <PageTwo navigator={navigator} />
}
}

_configureScene(route) {
return CustomSceneConfig;
}

render() {
return (
<Navigator
initialRoute={{id: 1, }}
renderScene={this._renderScene}
configureScene={this._configureScene} />
);
}
}

var styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
rightContainer: {
flex: 1,
},
title: {
fontSize: 20,
marginBottom: 8,
textAlign: 'center',
},
year: {
textAlign: 'center',
},
thumbnail: {
width: 53,
height: 81,
},
listView: {
paddingTop: 20,
backgroundColor: '#F5FCFF',
},
});

module.exports = SampleAppMovies;




Answer

In your renderRow method (in your case renderMovie), simply pass the movie in onPress prop of TouchableOpacity, something like this:

renderMovie(movie) {
    title1 = movie.title;
    year1 = movie.year;

    return (
    <TouchableOpacity onPress={() => _handlePressList(movie)}>    // SEE HERE!!
      <View style={styles.container}>
        <Image
          source={{uri: movie.posters.thumbnail}}
          style={styles.thumbnail}
        />
        <View style={styles.rightContainer}>
          <Text style={styles.title}>{movie.title}</Text>
          <Text style={styles.year}>{movie.year}</Text>
        </View>
      </View>
    </TouchableOpacity>
    );
  },

_handlePressList(movie){
    this.props.navigator.push({id: 2, movie.title1, movie.year1});
  },

Then you can do whatever you want with the movie.

Hope it's helpful.