时间戳

首页 > 解决方案 > 如何在 React Native 中将 height 或 maxHeight 设置为 FlatList？

reactjs - 如何在 React Native 中将 height 或 maxHeight 设置为 FlatList？

问题描述

如何为 my 设置一个固定高度，FlatList以便它滚动但就位而不是继续移动到bottom. 目前，修复height工作正常，但我FlatList不会滚动，我尝试添加showsVerticalScrollIndicator={true}但没有可见的垂直滚动指示器。

我Flatlist在另一个里面FlatList，请不要告诉我使用 ScrollView

标签： reactjsreact-nativereact-native-flatlistflatlist

解决方案

您可以通过设置视图样式来解决它，在其中放置平面列表并使用属性高度设置视图样式。例如高度：“85%”。

<View style={styles.list}>
    <FlatList ... />
</View>

const styles = StyleSheet.create({
   list: {
      ...
      Height: "85%",
   },

如果您想要更多的灵活性，可以查看以下内容。

（我有两个列表应该平等地使用空间，或者如果只显示一个，完整的空间不包括标题）

为此，我使用了 minHeight 和 maxHeight。（一个人不想工作）

<View>
    <Header1 />
    <View style={ this.state.showValids && this.state.showInvalid ? styles.validViewHalved : styles.validView }>
        { this.state.showValid &&
            <View style={styles.list}>
                <FlatList ... />
            </View>
        }
    </View> 
</View> 
<View>
    <Header2 />
    <View style={ this.state.showValid && this.state.showInvalid ? styles.invalidViewHalved : styles.invalidView }>
        { !this.state.showInvalid &&
            <View style={styles.list}>
                <FlatList ... />
            </View>
        }
    </View> 
</View> 

const styles = StyleSheet.create({
  validView: {  
    ...
    minHeight: "0%",
    maxHeight: "93%",
  },
  invalidView: {    
    ...
    minHeight: "0%",
    maxHeight: "93%",
  },
  validViewHalved: {    
    ...
    minHeight: "0%",
    maxHeight: "50%",
  },
  invalidViewHalved: {    
    ...
    minHeight: "0%",
    maxHeight: "50%",
  },
  list: {    
    ...
    //height: "85%",
  },

推荐阅读