學習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
}
]
從外部視圖中移除flex會隱藏所有內容,並且將flex 1或height添加到列表中也無法以某種方式工作。 –
給設備高度外觀 – Codesingh
並給列表視圖高度爲100然後檢查它是否滾動 – Codesingh