如何在反应原生中改变 <​​FlatList/> 的高度？

Posted 2023-02-16

【中文标题】如何在反应原生中改变 <​​FlatList/> 的高度？

【英文标题】：How to change height of <FlatList/> in react native?

【发布时间】：2018-05-11 23:45:36

【问题描述】：

我想改变<FlatList />的宽度和高度。

我将height 样式设置为当前的<FlatList />，但它从未起作用。

我无法更改<FlatList /> 的高度。

这是我的render() 函数和样式。

    render() 
        const listData = [];
        listData.push( key: 0 );
        listData.push( key: 1 );
        listData.push( key: 2 );
        listData.push( key: 3 );
        listData.push( key: 4 );
        return (
            <View style=styles.container>
                <FlatList
                    data=listData
                    renderItem=(item) => 
                        return (
                            <View
                                style=
                                    width: 30, height: 30, borderRadius: 15, backgroundColor: 'green'
                                
                            />
                        )
                    
                    horizontal
                    style=styles.flatList
                />
            </View>
        );
    

const styles = StyleSheet.create(
    container: 
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: 'white'
    ,
    flatList: 
        height: 50,
        backgroundColor: 'red'
    
);

这是这段代码的结果。

我找到了几个小时的答案，但没有任何帮助。

我不确定为什么高度样式不起作用。

感谢任何帮助。

【参考方案1】：

设置<View/>的高度并将<FlatList/>放在<View/>里面

【讨论】：

不允许滚动

【参考方案2】：

在 flatList 样式中添加 flexGrow: 0 对我有用，所以它将是：

flatList: 
  height: 50,
  backgroundColor: 'red',
  flexGrow: 0

【讨论】：

这比用视图组件装箱整个平面列表更好。

【参考方案3】：

FlatList 有道具 contentContainerStyle。您可以使用它来设置 FlatList 周围的包装器样式。 FlatList 从 ScrollView 继承这个 prop read hear

【参考方案4】：

添加flexGrow: 0。别提高度，响应式设计可能会崩溃

例子：

<FlatList
        style=
          flexGrow: 0,
        
        data=data
        renderItem=(item) => (
          <View>
            <Text>item.text</Text>
          </View>
        )
      />

【参考方案5】：

根据数据给出宽度然后高度

 <View style=maxHeight:"50%",width:"60%">
       <FlatList
            data=this.props.data
            renderItem=( item ) => <Text>item.name</Text>
            keyExtractor=(item, index) => index
        />
 </View>

【参考方案6】：

<View style=styles.flatList>
   <FlatList
      keyExtractor =  this.keyExtractor 
      data =  this.getPOs() 
      ListEmptyComponent =  this.renderEmpty 
      ItemSeparatorComponent =  Separator 
      renderItem =  this.renderItem 
   />
</View>

对我来说，将 flex: 1 添加到视图中

const styles = StyleSheet.create(
    flatList: 
        flex: 1,
    
)

【参考方案7】：

您可以将 flexGrow: 0 添加到对我有用的 flatList 样式中，所以它将是：

  <FlatList
   ...otherProps
    style=
      height: 50,
      backgroundColor: 'red',
      flexGrow: 0
    
    />

【参考方案8】：

render() 
    const listData = [];
    listData.push( key: 0 );
    listData.push( key: 1 );
    listData.push( key: 2 );
    listData.push( key: 3 );
    listData.push( key: 4 );
    return (
        <View style=styles.container>
            <FlatList
                data=listData
                renderItem=(item) => 
                    return (
                        <View
                            style=
                                width: 30, height: 30, borderRadius: 15, backgroundColor: 'green'
                            
                        />
                    )
                
                horizontal
                style=styles.flatList
            />
        </View>
    );


const styles = StyleSheet.create(
    container: 
        height:100
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: 'white'
    ,
    flatList: 
        backgroundColor: 'red'
    
);

【讨论】：

在您的答案中添加解释会对其他人更有用。