Nicht mit ListView in ReactNative scrollen

Question

Learning ReactNative und versuchen, eine einfache Zeitleiste mit ListView erstellen, haben verschiedene Einstellungen versucht, aber nicht mit ListView scrollen. Haben nur für iOS nicht versucht, ob es für Android funktioniert, ist unten der vollständige Code ...

irgendeine Hilfe würde geschätzt werden!

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; 

Im Folgenden finden Sie JSON-Datei mit Daten;

[ 
{ 
    "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 
} 
] 

Answer 1

Ich denke, es ein Problem in Ihrer Listview Höhe ist so versucht Listenansicht Höhe nach Ihren Anforderungen einstellen oder flex:1 auf Listview-Stil-Eigenschaft und entfernen flex in Außenansicht.

Prost :)

Answer 2

sehr leid für diese dumme Frage, ich habe versucht, mit zwei Fingern in meinem Macbook blättern und es funktioniert nicht, aber es funktioniert, wenn ich versuche, oder nach unten ziehen Sie nach oben. Danke für die Hilfe.