在React Native中设置ListView的高度 [英] Set height of ListView in React Native

问题描述

我需要设置ListView的宽度和高度.虽然设置宽度可以按预期工作，但是设置高度没有任何作用，并且ListView始终延伸到屏幕的几乎底部(在屏幕的底部和ListView的底部之间只有边距).我正在以这种方式在render方法中创建ListView:

I need to set width and height of ListView. While setting width works as expected, setting height has no effect and ListView is always stretching into almost bottom of the screen (there is only margin between bootom of screen and bottom of ListView). I am creating ListView in render method this way:

<ListView ref={component => this._stationsListFrom = component} style={styles.stationsList} dataSource={this.state.dataSource} renderRow={(rowData) => <Text>{rowData}</Text>} />

这是它的风格:

stationsList: {
  backgroundColor: 'white',
  height: 0,
}

我还尝试通过以下命令在方法中设置其高度:

I have also tried to set its height in a method by this command:

this._stationsListFrom.setNativeProps({height: 200});

当我尝试使用此命令设置宽度时，它起作用了.但是设置高度没有任何作用.

When I have tried to set width using this command, it worked. But setting height does nothing.

如何将ListView的高度(例如，在TextInput没问题的情况下)设置为所需的值?我受伤的唯一方法是使用底边距，但这不是我要使用的方法.

How can I set height of ListView (for example, in the case of TextInput its not a problem) to desired value? Only way I wound is to use bottom margin, but that is not the way I want to use.

我仅在iOS上进行测试(因为在Android上工作方式不同).

I am testing on iOS only (for the case it works differently on Android).

我的代码:

import React, { Component } from 'react';
import Dimensions from 'Dimensions';
import {
  AppRegistry,
  StyleSheet,
  Text,
  TextInput,
  ListView,
  Button,
  View
} from 'react-native';

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'flex-start',
    alignItems: 'flex-start',
    backgroundColor: '#D8CD36',
    padding: 25
  },
  label: {
    textAlign: 'left',
    color: '#333333',
    fontSize: 20,
    margin: 5,
  }, 
  textInput: {
    height: 40, 
    borderColor: 'black', 
    borderWidth: 2,
    padding: 7,
  },
  stationsList: {
    backgroundColor: 'white',
    height: 0,
  },
  separator: {
    flex: 1,
    height: StyleSheet.hairlineWidth,
    backgroundColor: '#8E8E8E',
  },
  menuButton: {
  },
  },
  );

export default class TestApp extends Component {

  constructor(props) {
    super(props);

    const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}); this.state = { dataSource: ds.cloneWithRows(['Žilina', 'Košice', 'Vrútky']), };
  }

  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.label}>
            Z
        </Text>
        <TextInput ref={component => this._textInputFrom = component} style={styles.textInput} placeholder="Východzia stanica" onChangeText={this.fromTextChange.bind(this)} onLayout={(event) => { this.correctMenuFromWidth(event.nativeEvent.layout) }} renderSeparator={(sectionId, rowId) => <View key={rowId} style={styles.separator}/>} />
        <Text style={styles.label}>
            Do
        </Text>
        <TextInput style={styles.textInput} placeholder="Cieľová stanica"/>
        <ListView ref={component => this._stationsListFrom = component} style={styles.stationsList} dataSource={this.state.dataSource} renderRow={(rowData) => <Button onPress={this.menuFromButtonPressed} style={styles.menuButton} title={rowData} />} />
      </View>
    );
  }

  correctMenuFromWidth(layout) {
    const {x, y, width, height} = layout;
    this._stationsListFrom.setNativeProps({marginTop: -74, width: width});
  }

  menuFromButtonPressed() {
  };

  fromTextChange() {
    this._textInputFrom.setNativeProps({text: 'Kraľovany'});
    this._stationsListFrom.setNativeProps({height: 200});
  };

}

AppRegistry.registerComponent('TestApp', () => TestApp);

推荐答案

在包装器内移动ListView并将高度设置为包装器:

Move ListView inside wrapper and set height to wrapper:

<View style={{height: 200}}>
  <ListView .../>
</View>

来自 ScrollView文档(ListView使用ScrollView):

From ScrollView docs (ListView uses ScrollView):

请记住，滚动视图必须具有一定的高度才能正常工作，因为它们将高度不受限制的子级包含在一个有限的容器中(通过滚动交互).为了限制ScrollView的高度，请直接设置视图的高度(不建议使用)，或者确保所有父视图的边界高度都为上限.

Keep in mind that ScrollViews must have a bounded height in order to work, since they contain unbounded-height children into a bounded container (via a scroll interaction). In order to bound the height of a ScrollView, either set the height of the view directly (discouraged) or make sure all parent views have bounded height.

这篇关于在React Native中设置ListView的高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！