在ListView中显示包含3列的标题

Display header containing 3 columns in ListView

本文关键字：3列 标题 包含 显示 ListView      更新时间：2024-05-02

我对原生react完全陌生，正在创建一个需要在ListView中显示项目的应用程序。我的ListView由3列组成，即author、title和price，即ListView中的每一行都显示这三列。目前，我只能在标题部分和内容部分显示一列作为

_renderRow(rowData){
    return (
        <View>
            <Text style={styles.row}> {rowData.title}</Text>
        </View>
    )
},
_renderHeader(){
    return (
        <View style={styles.sectionDivider}>
            <Text style={styles.headingText}>
                Title
            </Text>
        </View>
    )
},

我的渲染函数是

render() {
    return(
        <View style={styles.container}>
            <ActivityIndicatorIOS
                animating={this.state.isLoading}
                size="large">
            </ActivityIndicatorIOS>
            <ListView
                dataSource={this.state.dataSource}
                renderRow={this._renderRow}
                renderHeader={this._renderHeader}
            />
        </View>
    )
}

所以，我想在标题和内容部分呈现3列。我在谷歌上搜索了一下，但找不到任何相关内容。

使用flexbox样式的属性可以轻松创建列。例如：

_renderRow(rowData){
  return(
    <View styles={styles.flexRow}>
        <Text>{rowData.title}</Text>
        <Text>{rowData.author}</Text>
        <Text>{rowData.price}</Text>
    </View>
  )
_renderHeader() {
  return(
    <View styles={styles.flexRow}>
        <Text>Title</Text>
        <Text>Author</Text>
        <Text>Price</Text>
    </View>
  )
}
var styles = StyleSheet.create({
  flexRow: {
    flex: 1,
    flexDirection: 'row'     <---- This is the important style property
  },
})

我在创建了一个片段https://rnplay.org/apps/p5hzcg如果你想用一个工作的例子。

您应该尝试用之类的东西修改代码

_renderRow(rowData){ return ( <View> <Text style={styles.column1}> {rowData.text1}</Text> <View style={styles.sectionDivider}> <Text style={styles.column2}> {rowData.text2}</Text> <View style={styles.sectionDivider}> <Text style={styles.column3}> {rowData.text3}</Text> </View> ) }, _renderHeader(){ return ( <View> <Text style={styles.column1}>textColumm1</Text> <View style={styles.sectionDivider}> <Text style={styles.column2}>textColumm2</Text> <View style={styles.sectionDivider}> <Text style={styles.column3}>textColumm2</Text> </View> ) },

通过这种方式，每行将有3个具有相同样式的元素，如果您固定它们的宽度，它将与列完全相同。嵌入文本可能会改变宽度值，因此您必须决定如果文本太长该怎么办。所以主要是决定是调整文本大小还是多行。

相关文章：