使每个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容器的宽度和高度？

回答

相关问题