时间戳

首页 > 解决方案 > 由于 FlatList 作为其子视图，因此未正确设置超级视图的高度

react-native - 由于 FlatList 作为其子视图，因此未正确设置超级视图的高度

问题描述

我正在尝试在视图中创建一个 FlatList，但是当我将视图的位置设置为绝对时，它会占用 FlatList 的总内容大小。但我想将视图的高度保持为导航栏和底部栏之间的剩余屏幕尺寸，但我不知道如何实现。

这是我的代码：

import React from 'react';

import { View, StyleSheet, SafeAreaView, FlatList, Image, } from 'react-native';
import { DARK_GREY_COLOR_CODE, GREY_COLOR_CODE, MAGENTA_COLOR_CODE } from '../Constant/Constants';


export default class ExplorePage extends React.Component {
  _renderTutorialList() {
  }

  render() {
    const sampleNameArray = [
      {
        id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
        title: 'Kinky',
      },
      {
        id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
        title: 'Waves/Loose Curls',
      },
      {
        id: '58694a0f-3da1-471f-bd96-145571e29d72',
        title: 'Curly',
        image_name: './Images/hairtype_thum_image.png',
      },
      {
        id: '58694a0f-3da1-471f-bd96-145571e29d79',
        title: 'Coily',
      },
    ];

    return (
      <SafeAreaView style={{flex:1, }}>
        <View style={{ flex: 1, position: 'absolute', width: '100%', backgroundColor: GREY_COLOR_CODE }}>
          <FlatList
            data={sampleNameArray}
            renderItem={({ item }) =>
              <View style={{width: '89.3%', height: 302, marginLeft: '5.4%', marginRight: '5.4%', }}>
                <Image source={require('../Images/user_icon.png')} style={{ position: 'absolute', width: '100%', height: '90%', borderRadius: 10, backgroundColor: MAGENTA_COLOR_CODE}} />
              </View>
            }
            keyExtractor={item => item.id}
          />
        </View>
      </SafeAreaView>
    );
  }
}

const styles = StyleSheet.create({
  button: {
    alignItems: 'center',
    backgroundColor: '#DDDDDD',
    padding: 10,
    width: 300,
    marginTop: 16,
  },
});

请帮帮我。我无法修复它，因为我是 React Native 的新手。

这是屏幕截图：

由于视图高度无法向下滚动

标签： react-nativereact-native-androidreact-native-ios

解决方案

试试这个

首先从 Flatlist 渲染项目并返回 Flatlist 项目的视图

 render() {
return (
  <View style={{flex: 1}}>
    <FlatList
      extraData={this.state}
      data={sampleNameArray}
      keyExtractor={item => {
        return item;
      }}
      renderItem={this.renderItem}
    />
  </View>
);

这是您的主要渲染方法，然后渲染项目并在下一次渲染中调整您的列表样式，并使用所描述的样式 style={styles.stylename}

 renderItem = ({item}) => {
return (
  <View>
    <View style={styles.body}>
      <Text style={styles.text}> {item.data1}</Text>
      <Text style={styles.text}> {item.data2}</Text>
      <Text style={styles.text}> {item.data3}</Text>
    </View>
  </View>
);

你可以设置你想要如何呈现你的项目，就像我这样做然后你可以为每个元素设置 CSS 属性。

希望它会为你工作

推荐阅读