listview没有显示在本地反应

Question

我有一个视图问题与ListView组件。当我点击视图时，它才会显示出来。它应该在显示时呈现。我在这里做错了什么？

在componentDidMount到updateListView（）之后，我也尝试了500ms到3000ms的超时，但它没有任何效果。

感谢您提供任何帮助！

import React from 'react';

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

class TopicList extends React.Component {

    constructor(props) {
        super(props);

        const ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 });
        const itemList = [
            { label: 'test 1', target: "Category" },
            { label: 'test 2', target: "Category" },
            { label: 'test 3', target: "Category" },
            { label: 'test 4', target: "Category" }];
        this.state = {
            dataSource: ds.cloneWithRows(itemList),
            initialized: false,
            itemList: itemList
        };
    }

    updateListView(items) {
        console.log("MachineTopicList.updateListView()")
        this.setState({
            dataSource: this.state.dataSource.cloneWithRows(
                items.slice() // copy items to a new array
            )
        });
    }

    componentDidMount() {
        this.updateListView(this.state.itemList);
    }

    render() {
        return (
            <ListView
                dataSource={this.state.dataSource}
                renderRow={(rowData) => this.getListItem(rowData)}
                style={{ flex: 1, height: 200 }}
            />
        )
    }

    getListItem(rowData) {
        if (rowData && rowData.label) {
            return (
                <TouchableHighlight
                    onPress={() => this.navigateToItem(rowData.target)}
                    style={styles.wrapper}
                >
                    <View style={styles.container}>
                        <View style={styles.label}>
                            <Text>{rowData.label}</Text>
                        </View>
                        <View style={styles.arrow}>
                            <Text> > </Text>
                        </View>
                    </View>
                </TouchableHighlight>
            )
        }

        return null;
    }

    navigateToItem(itemName) {
        this.props.navigation.navigate(itemName)
    }
}

export default TopicList;

TopicList.propTypes = {
    navigation: React.PropTypes.object.isRequired
};


const styles = StyleSheet.create({
    wrapper: {
        flex: 1,
        height: 60
    },
    container: {
        flex: 1,
        flexDirection: "row"
    },
    label: {
        flex: 11,
        backgroundColor: "yellow"
    },
    arrow: {
        flex: 1,
        backgroundColor: "pink"
    }
});