ios – 在React Native中设置ListView的高度

前端之家收集整理的这篇文章主要介绍了ios – 在React Native中设置ListView的高度前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我需要设置ListView的宽度和高度.当设置宽度按预期工作时,设置高度无效,ListView总是伸展到屏幕的几乎底部(屏幕的bootom和ListView的底部之间只有边距).我用这种方式在render方法中创建ListView:
  1. <ListView ref={component => this._stationsListFrom = component} style={styles.stationsList} dataSource={this.state.dataSource} renderRow={(rowData) => <Text>{rowData}</Text>} />

这是它的风格:

  1. stationsList: {
  2. backgroundColor: 'white',height: 0,}

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

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

当我尝试使用此命令设置宽度时,它可以工作.但设定高度什么都不做.

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

我只在iOS上测试(因为它在Android上的工作方式不同).

我的代码

  1. import React,{ Component } from 'react';
  2. import Dimensions from 'Dimensions';
  3. import {
  4. AppRegistry,StyleSheet,Text,TextInput,ListView,Button,View
  5. } from 'react-native';
  6.  
  7. const styles = StyleSheet.create({
  8. container: {
  9. flex: 1,justifyContent: 'flex-start',alignItems: 'flex-start',backgroundColor: '#D8CD36',padding: 25
  10. },label: {
  11. textAlign: 'left',color: '#333333',fontSize: 20,margin: 5,},textInput: {
  12. height: 40,borderColor: 'black',borderWidth: 2,padding: 7,stationsList: {
  13. backgroundColor: 'white',separator: {
  14. flex: 1,height: StyleSheet.hairlineWidth,backgroundColor: '#8E8E8E',menuButton: {
  15. },);
  16.  
  17. export default class TestApp extends Component {
  18.  
  19. constructor(props) {
  20. super(props);
  21.  
  22. const ds = new ListView.DataSource({rowHasChanged: (r1,r2) => r1 !== r2}); this.state = { dataSource: ds.cloneWithRows(['Žilina','Košice','Vrútky']),};
  23. }
  24.  
  25. render() {
  26. return (
  27. <View style={styles.container}>
  28. <Text style={styles.label}>
  29. Z
  30. </Text>
  31. <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}/>} />
  32. <Text style={styles.label}>
  33. Do
  34. </Text>
  35. <TextInput style={styles.textInput} placeholder="Cieľová stanica"/>
  36. <ListView ref={component => this._stationsListFrom = component} style={styles.stationsList} dataSource={this.state.dataSource} renderRow={(rowData) => <Button onPress={this.menuFromButtonPressed} style={styles.menuButton} title={rowData} />} />
  37. </View>
  38. );
  39. }
  40.  
  41. correctMenuFromWidth(layout) {
  42. const {x,y,width,height} = layout;
  43. this._stationsListFrom.setNativeProps({marginTop: -74,width: width});
  44. }
  45.  
  46. menuFromButtonPressed() {
  47. };
  48.  
  49. fromTextChange() {
  50. this._textInputFrom.setNativeProps({text: 'Kraľovany'});
  51. this._stationsListFrom.setNativeProps({height: 200});
  52. };
  53.  
  54. }
  55.  
  56. AppRegistry.registerComponent('TestApp',() => TestApp);

解决方法

在包装器中移动ListView并将高度设置为包装器:
  1. <View style={{height: 200}}>
  2. <ListView .../>
  3. </View>

ScrollView docs(ListView使用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.

猜你在找的iOS相关文章