Question

我试图在View中创建FlatList，但是当我将视图的位置设置为Absolute时，它将占用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的新手。

这是屏幕截图：

Answer 1

试试

首先渲染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属性设置为每个元素。

希望它将为您服务?

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

1 个答案: