Question

我想根据其内容（图像和文本）调整listView行的大小，图像是一个遥远的图像，我正在从firebase读取它，我用uri显示它，当我在行中放置宽度或高度时，图像显示，但我想要做的是调整行的大小，使其占用图像的高度。

我找到了这个解决方案

var React = require('react-native');

var {
AppRegistry,
StyleSheet,
View,
Image
} = React;

var TestCmp = React.createClass({
 render: function() {
   return (
     <View style={styles.imageContainer}>
       <Image style={styles.image} source={{uri:   'http://lorempixel.com/200/400/sports/5/![enter image description here][2]'}} />
      </View>
     );
  }
  });

 var styles = StyleSheet.create({
  imageContainer: {
   flex: 1,
   alignItems: 'stretch'
   },
  image: {
    flex: 1
 }
 });

  AppRegistry.registerComponent('RCTTest', () => TestCmp);

但它不适用于listView行

我还试图给出listView行的容器： flex：1， alignItems：'stretch'，左：0，右：0，身高：500，

和图片：挠性：1，

但当然图像的高度为500，它会被拉伸，因此它的某些部分将不可见。

Answer 1

问题解决了！保存问题我使用Image.getSize并计算相对于屏幕宽度的高度。但Image.getSize是异步的，所以我做的是以下内容： 1-I通过导入尺寸计算屏幕宽度并保存保存在变量中。

var widthScreen = Dimensions.get('window').width;

2-我在状态中添加了2个空数组：一个名为'itemsForListView'，另一个是'items'，你会在一段时间内看到原因。

在'listenForItems'方法中实现从fireBase读取数据，我写道：

listenForItems(itemsRef) {
var index= 0; //to track the image
// get children as an array
itemsRef.on('value', (snap) => {
  var items = [];
  snap.forEach((child) => {
     this.setState({
      items: this.state.items.concat([{ //I am adding the elements one by one to the state
       title: child.val().title,
       image: child.val().image,
       year: child.val().year,
       index: index,
       _key: child.key(),
       width: this.state.widthScreen, //give it the width of the screen as a variable
       height:0 //for the moment because I can't calculate it
      }])});
        this.getImageSize(child.val().image, index++);
    });
    });
     }


getImageSize(uri, ind) {
Image.getSize(uri, (width, height) => {
  //calculate the new height with respect to the width of the screen
  this.state.items[ind].height = this.state.widthScreen * height / width;
  this.setState({
    itemsForListView: this.state.itemsForListView.concat([
      this.state.items[ind]
    ])
  });
//feed the listView with the ready image
this.setState({
    dataSource: this.state.dataSource.cloneWithRows( this.state.itemsForListView)
  });
});
 }

现在，在列表视图的renderRow方法中，您可以使用item.width和item.height来为图像提供所需的大小。

listView关于其内容的行大小调整

1 个答案: