无法在ReactNative中使用ListView滚动

学习ReactNative并尝试使用ListView创建简单的时间轴，尝试了不同的设置，但无法使用ListView进行滚动。只尝试了iOS不知道它是否可以为Android工作，下面是完整的代码...无法在ReactNative中使用ListView滚动

任何帮助将不胜感激！

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 
} 
]

来源

2017-02-24 Vipin Dubey