使每個ListView Row的ListView容器的寬度和高度？

我想創建一個水平的ListView，其中每行是容器的寬度和高度，它給人一種頁面外觀和感覺的印象，其中1行顯示在屏幕上。使每個ListView Row的ListView容器的寬度和高度？

問題是我不確定如何設計行的樣式，以便它們匹配ListView的寬度和高度。有任何想法嗎？

import React, { Component } from 'react' 
import { 
    StyleSheet, 
    Text, 
    View, 
    ListView, 
    TouchableHighlight 
} from 'react-native' 


import Spinner from 'react-native-loading-spinner-overlay'; 


var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}); 


export default class ParcelView extends Component { 


    static navigationOptions = { 
    title: 'Parcel Screen', 
    }; 


    constructor() { 
    super(); 

    this.renderRow = this.renderRow.bind(this); 
    this.pressRow = this.pressRow.bind(this); 
    this.fetchData = this.fetchData.bind(this); 

    this.state = { 
     dataSource: ds.cloneWithRows([]), 
     loadingVisible: false 
    }; 
    } 


    componentDidMount() { 
    this.fetchData(); 
    } 


    render() { 
    const { navigate } = this.props.navigation; 
    return (
     <View> 
     <Spinner visible={this.state.loadingVisible} textContent={"Loading..."} textStyle={{color: '#FFF'}} /> 
     <View style={styles.listWrapper} > 
      <ListView 
       dataSource={this.state.dataSource} 
       renderRow={this.renderRow} 
       horizontal={true} 
       style={styles.listView} 
      /> 
     </View> 
     </View> 
    ); 
    } 


    renderRow(rowData){ 
    return (
     <TouchableHighlight onPress={() => this.pressRow()}> 
     <View> 
      <View style={styles.row}> 
      <Text style={styles.text}>{rowData.userId}</Text> 
      </View> 
     </View> 
     </TouchableHighlight> 
    ); 
    } 


    pressRow(rowID: number){ 

    const { navigate } = this.props.navigation; 

    var text = "Testing"; 

    // Navigate To Parcel Screen 
    navigate('Parcel', { name: 'Jane' }); 

    } 


    fetchData(){ 

    this.setState({loadingVisible: true}); 

    fetch("https://jsonplaceholder.typicode.com/posts", {method: "GET"}) 
    .then((response) => response.json()) 
    .then((responseData) => 
    { 
     this.setState({ dataSource: this.state.dataSource.cloneWithRows(responseData)}); 
    }) 
    .done(() => { 
     this.setState({loadingVisible: false}); 
    }); 

    } 


} 


var styles = StyleSheet.create({ 
    listWrapper: { 
    padding: 10, 
    backgroundColor: '#F6F6F6', 
    borderWidth: 1, 
    borderColor: "#000", 
    height: 300, 
    margin: 10 
    }, 
    row: { 
    backgroundColor: '#ccc', 
    borderWidth: 1, 
    borderColor: "#000", 
    alignSelf: 'stretch', 
    }, 
    listView: { 
    backgroundColor: '#ccc', 
    } 
});

來源

2017-04-26 ORStudios

您的ParcelView組件可以爲ListView設置一個onLayout prop。當調用onLayout時，可以將ListView的寬度和高度保存爲狀態。然後，在渲染行時，ParcelView可以爲其呈現的行設置width和height。還要確保在ListView上將pagingEnabled設置爲true，以便您可以讓本機ScrollView處理滑動手勢。

來源

2017-04-26 13:48:43

使每個ListView Row的ListView容器的寬度和高度？

回答

相關問題