Set ListView in React Native Height

I need to set the width and height of a ListView. While the width adjustment works as expected, the installation height is not affected, and the ListView always stretches almost to the bottom of the screen (there is only a field between loading the screen and the bottom of the ListView). I create a ListView in the render method as follows:

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

This is his style:

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

I also tried to set its height in the method using this command:

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

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

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

I test only on iOS (for the case when it works differently on Android).

My code is:

 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); 
+6
source share
1 answer

Move the inner shell of the ListView and set the height to the wrapper:

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

From ScrollView Documents (ListView uses ScrollView):

Keep in mind that ScrollViews must have a limited height in order to work, as they contain children with unlimited height in a limited container (via scroll interaction). To relate the height of the ScrollView, either set the height of the view directly (discouraged), or make sure all parent views have a limited height.

+12
source

Source: https://habr.com/ru/post/1013936/


All Articles