在ListView react-native中选择一行以获取详细信息
发布时间:2020-12-15 20:11:00 所属栏目:百科 来源:网络整理
导读:我是反应原生的新手.我在 https://facebook.github.io/react-native/docs/sample-application-movies.html看到了一个例子. 它正在构建一个电影应用程序,可以获取电影并在ListView中显示它们.我们如何选择一行来获取其详细数据并在其他视图中显示?请帮忙.谢
我是反应原生的新手.我在
https://facebook.github.io/react-native/docs/sample-application-movies.html看到了一个例子.
它正在构建一个电影应用程序,可以获取电影并在ListView中显示它们.我们如何选择一行来获取其详细数据并在其他视图中显示?请帮忙.谢谢 :) 这是我到目前为止所做的: /** * 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,}); module.exports = SampleAppMovies; 解决方法
在您的renderRow方法(在您的情况下为renderMovie)中,只需在TouchableOpacity的onPress prop中传递影片,如下所示:
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}); }, 然后你可以用电影做任何你想做的事情. 希望它有用. (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |