Question

我想创建一个具有ListView标头的React Native演示。目前，我只是在我的ListView组件上呈现视图：

render: function() {
    if (!this.state.loaded) {
        return this.renderLoadingView();
    }
            return (
               <View style = {styles.viewContainer}>
                    <Text style = {styles.title}>标题：{this.state.question.content}</Text>
                    <Text style = {styles.year}>描述：{this.state.question.description}</Text>
                    <ListView
                    dataSource={this.state.dataSource}
                    renderRow={this.renderMovie}
                    style={styles.listView}/>
                </View>
            );
            //加载回复答案

},

renderLoadingView: function() {
    return (
        <View style={styles.container}>
            <Text>
                Loading Infos...
            </Text>
        </View>
    );
},

renderMovie: function(movie) {
    return (
        <View style={styles.container}>
            <View style={styles.rightContainer}>
                <Text style={styles.title}>{movie.content}</Text>
                <Text style={styles.year}>id:{movie.username}</Text>
            </View>
        </View>
        );
    },
});

我想将标题呈现为ListView组件的一部分。我怎么能这样做？

Answer 1

根据React Native documentation on ListView，ListView可以接受renderHeader函数作为道具，并根据它呈现标题。

以下是您可以这样做的方法：

render: function() {
    if (!this.state.loaded) {
        return this.renderLoadingView();
    }
            return (
               <View style = {styles.viewContainer}>
                    <ListView
                    dataSource={this.state.dataSource}
                    renderRow={this.renderMovie}
                    renderHeader={this.renderHeader}
                    style={styles.listView}/>
                </View>
            );
},

renderHeader: function() {
    return (
        <View>
            <Text style = {styles.title}>标题：{this.state.question.content}</Text>
            <Text style = {styles.year}>描述：{this.state.question.description}</Text>
        </View>
        )
}

renderLoadingView: function() {
    return (
        <View style={styles.container}>
            <Text>
                Loading Infos...
            </Text>
        </View>
    );
},

renderMovie: function(movie) {
    return (
        <View style={styles.container}>
            <View style={styles.rightContainer}>
                <Text style={styles.title}>{movie.content}</Text>
                <Text style={styles.year}>id:{movie.username}</Text>
            </View>
        </View>
        );
    },
});

列表视图标题关于反应原生

1 个答案: