Question

我想更改<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'
    }
});

这是此代码的结果。

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

我不确定为什么高度风格不起作用。

感谢任何帮助。

Answer 1

我找到了答案。

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

内

它解决了这个问题。：）

Answer 2

将flexGrow: 0添加到flatList样式对我有用，因此它将是：

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

Answer 3

FlatList具有prop contentContainerStyle。您可以使用它来设置FlatList的包装样式。 FlatList从ScrollView read hear

继承了此道具

Answer 4

先宽后高根据数据工作

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

Answer 5

<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,
    }
})

Answer 6

添加flexGrow: 0。更不用说高度了，响应性设计可能会失败

示例：

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

Answer 7

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

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

Answer 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'
    }
});

如何改变<flatlist>的高度以反应原生？

8 个答案: