我需要设置ListView的宽度和高度.当设置宽度按预期工作时,设置高度无效,ListView总是伸展到屏幕的几乎底部(屏幕的bootom和ListView的底部之间只有边距).我用这种方式在render方法中创建ListView:
- <ListView ref={component => this._stationsListFrom = component} style={styles.stationsList} dataSource={this.state.dataSource} renderRow={(rowData) => <Text>{rowData}</Text>} />
这是它的风格:
- stationsList: {
- backgroundColor: 'white',height: 0,}
我还尝试通过此命令在方法中设置其高度:
- this._stationsListFrom.setNativeProps({height: 200});
当我尝试使用此命令设置宽度时,它可以工作.但设定高度什么都不做.
如何将ListView的高度(例如,在TextInput的情况下,它不是一个问题)设置为所需的值?我唯一的方法是使用底部边距,但这不是我想要使用的方式.
我只在iOS上测试(因为它在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',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并将高度设置为包装器:
- <View style={{height: 200}}>
- <ListView .../>
- </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.