ListView行不在React Native中呈現

我有一個ListView組件，它通過redux接收狀態更新。組件代碼是：ListView行不在React Native中呈現

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

export default class Feed extends Component { 

    constructor(props) { 
    super(props); 
    this.ds = new ListView.DataSource({rowHasChanged: (row1, row2) => row1 !== row2}); 
    this.state = { 
     dataSource: this.ds.cloneWithRows(this.props.items), 
    } 
    } 

    componentWillReceiveProps(nextProps) { 
    this.setState({ 
     dataSource: this.ds.cloneWithRows(nextProps.items) 
    }); 
    } 

    renderRow(rowData) { 
    console.log('my data'); 
    console.log(rowData.body.text); 

    return(
     <View> 
     <Text>{rowData.body.text}</Text> 
     </View> 
    ); 
    } 

    render() { 
    const style = StyleSheet.create({ 
     helloWorld: { 
     color: 'red', 
     textAlign: 'center', 
     } 
    }); 
    return (
     <View> 
     <ListView dataSource={this.state.dataSource} renderRow={(rowData) => {this.renderRow(rowData)}} /> 
     </View> 
    ); 
    } 
} 

Feed.propTypes = { 
    items: PropTypes.array.isRequired, 
}

列表數據來自外部標註。當標註完成後，屬性項目會更新並通過（在包含組件中使用redux）。控制檯告訴我，renderRow被新數據調用，但我仍然收到一個空白屏幕。有任何想法嗎？期待這是愚蠢的。

來源

2016-04-11 pbattisson

這應該工作，我的代碼是幾乎相同的，我能想到的這個..唯一的事情：你的View組件的容器有多大，包裹在你的ListView中？它是否有足夠的空間顯示行項目？ –

有你renderRow道具一個簡單的錯誤：

<ListView 
    dataSource={this.state.dataSource} 
    renderRow={(rowData) => {this.renderRow(rowData)}} 
/>

功能(rowData) => {this.renderRow(rowData)}不返回任何內容。將其更改爲(rowData) => this.renderRow(rowData)。

來源

2016-04-12 05:54:12 ide

不知道這是否是一個很好的解決方案，但我解決它使用：

removeClippedSubviews={false}

在列表視圖組件

來源

2017-08-25 19:24:19 anibalajt

ListView行不在React Native中呈現

回答

相關問題