2016-04-11 1 views
1

私はreduxを通じて状態更新を受け取っているListViewコンポーネントを持っています。コンポーネントコードは次のとおりです。リストビューの行がリアクションネイティブでレンダリングされない

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が新しいデータで呼び出されたと私に伝えますが、まだ空白の画面が表示されています。何か案は?これが何かばかげたものになることを期待する。

+0

これは私のコードはかなり同じ私は考えることができ、この..唯一のものにされ、動作するはずです:Viewコンポーネントのコンテナがあなたの周りを包み込む大きさListView?行アイテムを表示するのに十分なスペースがありますか? –

答えて

1

ささいなバグがあなたにrenderRowの小道具にあります:

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

機能(rowData) => {this.renderRow(rowData)}は何も返しません。それを(rowData) => this.renderRow(rowData)に変更します。それは良い解決策だが、私は使用してそれを解決した場合

1

わからない:

removeClippedSubviews={false} 

リストビューコンポーネントで

関連する問題