无法在 React Native 中使用 ListView 滚动答案

【问题标题】：Not able to scroll using ListView in ReactNative无法在 React Native 中使用 ListView 滚动
【发布时间】：2017-02-24 19:41:49
【问题描述】：

学习 ReactNative 并尝试使用 ListView 创建简单的时间线，尝试了不同的设置但无法使用 ListView 滚动。只试过 iOS 不知道它是否适用于 Android，下面是完整的代码...

任何帮助将不胜感激！

import React, { Component } from 'react';
import { StyleSheet, View, ListView, Image, Text, TouchableHighlight, Dimensions } from 'react-native';

import data from './data.json';

const profileImage = require('./images/profile.jpg');
const backgroundImage = require('./images/background.jpg');
const heartImage = require('./images/plain-heart.png');

class MainApp extends Component {
 constructor(props) {
  super(props);
       var ds = new ListView.DataSource({
         rowHasChanged: (r1, r2) => r1 !== r2
       });

  this.state = {
       dataSource: ds.cloneWithRows(data),
  };
}

renderRow(record) {
return(
  <View style = {styles.postContainer}>
    <View style = {styles.row}>
      <View style = {styles.iconContainer}>
        <Image source = {profileImage} style = {styles.icon} />
      </View>
      <View style = {styles.info}>
        <Text style = {styles.userName}>{record.name}</Text>
      </View>
    </View>
    <Image source = {backgroundImage} style = {styles.backgroundImage}>
      <Text style = {styles.quote}>{record.text}</Text>
    </Image>
    <View style = {styles.row}>
      <View style = {styles.likeIconContainer}>
        <Image source = {heartImage} style = {styles.like} />
      </View>
      <View style = {styles.likeInfo}>
        <Text style = {styles.likeText}>{record.likes} likes</Text>
      </View>
    </View>
  </View>
  );
 }

render() {
return (
  <View style = { styles.container }>
    <Text style = {  styles.pageTitle } > Timeline </Text >
    <ListView
        dataSource = {this.state.dataSource}
        renderRow = {this.renderRow}
    />
  </View >
 );
 }
}

const styles = StyleSheet.create({
 container:{
 flex:1,
 backgroundColor:'#fff'
},
pageTitle:{
 backgroundColor: '#0f1b29',
 color: '#fff',
 fontSize: 18,
 fontWeight: 'bold',
 padding: 10,
 paddingTop: 40,
 textAlign: 'center',
},
postContainer:{
 backgroundColor:'#fff'
},
row:{
 borderColor: '#f1f1f1',
 borderBottomWidth: 1,
 flexDirection: 'row',
 marginLeft: 10,
 marginRight: 10,
 paddingTop: 20,
 paddingBottom: 20,
},
iconContainer:{
 alignItems: 'center',
 backgroundColor: '#feb401',
 borderColor: '#feaf12',
 borderRadius: 25,
 borderWidth: 1,
 justifyContent: 'center',
 height: 50,
 width: 50,
},
icon:{
 height: 22,
 width: 22,
},
info:{
 flex: 1,
 paddingLeft: 25,
 paddingRight: 25,
},
userName:{
 fontWeight: 'bold',
 fontSize: 16,
 marginBottom: 5,
},
backgroundImage:{
 height: 250,
 width:width
},
quote:{
 position: 'absolute',
 fontSize:24,
 fontWeight:'bold',
 color: '#fff',
 backgroundColor: 'rgba(0,0,0,0)',
 borderRadius: 5,
 height: 250,
 padding: 25,
 top: 30,
 right: 10,
 left: 10
},
likeIconContainer:{
 alignItems: 'center',
 backgroundColor: '#feb401',
 borderColor: '#feaf12',
 borderRadius: 25,
 borderWidth: 1,
 justifyContent: 'center',
 height: 50,
 width: 50,
},
like:{
 height: 8,
 width: 8,
},
likeInfo:{
 flex: 1,
 paddingLeft: 25,
 paddingRight: 25,
},
likeText:{
 fontWeight: 'bold',
 fontSize: 8,
 marginBottom: 5,
}
});

export default MainApp;

下面是带有数据的json文件；

[
 {
  "name":"Vipin Dubey",
  "text": "While meditating we are simply seeing what the mind has been doing all along.",
  "likes": 5
 },
 {
  "name":"Vipin Dubey",
  "text": "Suffering is due to our disconnection with the inner soul. Meditation is establishing that connection .",
  "likes": 100
 },
 {
  "name":"Vipin Dubey",
  "text": "Self-observation is the first step of inner unfolding.",
  "likes": 85
 },
 {
  "name":"Vipin Dubey",
  "text": "When meditation is mastered, the mind is unwavering like the flame of a candle in a windless place.",
  "likes": 146
 }
]

【问题讨论】：

标签： javascript ios listview react-native

【解决方案1】：

我认为您的列表视图高度存在问题，因此请尝试根据您的要求设置列表视图高度或在列表视图样式属性上设置 flex:1 并删除外部视图中的 flex。

干杯:)

【讨论】：

从外部视图中移除 flex 会隐藏所有内容，并且在列表中添加 flex 1 或高度也不起作用。
将设备高度赋予外部视图
并将列表视图高度设为 100，然后检查它是否滚动
之后根据你设置列表视图高度
没问题的兄弟:)

【解决方案2】：

非常抱歉这个愚蠢的问题，我试图在我的 Macbook 上用两根手指滚动，但它不起作用，但是如果我尝试向上或向下拖动它就可以了。感谢大家的帮助。

【讨论】：