使用ScrollView 标签包含FlatList 内容列表显示不全
来源:18-1 课程总结
佳谦科技
2020-01-10
老师,您好,我们这边使用ScrollView 标签包含FlatList 内容列表显示不完全,麻烦老师看下,谢谢!
代码如些:
<FlatList
data={items}
renderItem={data => this.renderItem(data)}
/>
下面是截取的renderItem(data)的函数
renderItem(data){
rfeturn(
{item.account}
未认证
已关注
<Text style={{fontSize:unitWidth26,color:‘lightgray’}}>{item.time} {item.location}
<Text style={{color:‘grey’,marginTop:unitHeight16}}>{item.content}
<ScrollView style={styles.middle4} horizontal={true}>
{/* 实现大图预览 */}
<Lightbox activeProps={
{
style: {
width: Dimensions.get('window').width,
height: Dimensions.get('window').height
},
resizeMode: 'contain'
}}>
{/* <Image style={styles.man} source={require('../../image/mengchong2.png')}/> */}
<Image style={styles.man} source={{uri:item.url1}}/>
</Lightbox>
{/* 实现大图预览 */}
<Lightbox activeProps={
{
style: {
width: Dimensions.get('window').width,
height: Dimensions.get('window').height
},
resizeMode: 'contain'
}}>
{/* <Image style={styles.image2} source={require('../../image/mengchong3.png')}/> */}
<Image style={styles.man} source={{uri:item.url2}}/>
</Lightbox>
{/* 实现大图预览 */}
<Lightbox activeProps={
{
style: {
width: Dimensions.get('window').width,
height: Dimensions.get('window').height
},
resizeMode: 'contain'
}}>
{/* <Image style={styles.man1} source={require('../../image/mengchong4.png')}/> */}
<Image style={styles.man1} source={{uri:item.url3}}/>
</Lightbox>
</ScrollView>
<View style={styles.middle_11}>
{/*<Image style={{marginLeft:unitWidth*35,resizeMode:'contain',width:unitWidth*40,marginTop:unitHeight*-10}} source={require('../../image/fenxiang.png')}/>*/}
{/*<Text style={styles.text1}>1314</Text>*/}
<TouchableOpacity style={{flexDirection:'row'}} onPress={()=>{this._showAlert4(dianzan,incomeid)}}>
<Image style={{marginLeft:unitWidth*150}} source={item.dianzan==2?require('../../image/dt1.png'):require('../../image/zan.png')}/>
<Text style={styles.text1}>{item.givenum}</Text>
</TouchableOpacity>
<TouchableOpacity>
<Image style={{marginLeft:unitWidth*140}} source={require('../../image/pl.png')}/>
<Text style={styles.text1}>{item.reply}</Text>
</TouchableOpacity>
</View>
</View>
)
}
下面是style格式:
const styles = StyleSheet.create({
container: {
width:unitWidth750,
// height:unitHeight2780,
flex:1,
backgroundColor:’#f2f2f2’,
},
top1:{
width:unitWidth*750,
height:unitHeight*60,
flexDirection:'row',
backgroundColor:'white'
},
top2:{
marginLeft:unitWidth*390,
width:unitWidth*160,
height:unitHeight*40,
backgroundColor:'#90ee90',
borderRadius:unitWidth*16,
marginTop:unitHeight*10,
textAlignVertical:'center',
flexDirection:'row'
},
view1:{
backgroundColor:'#90ee90',
marginTop:unitHeight*6,
marginLeft:unitWidth*4
},
top3:{
width:unitWidth*750,
height:unitHeight*260,
backgroundColor:'white',
flexDirection:'row'
},
top31:{
width:unitWidth*320,
height:unitHeight*190,
borderRadius:unitWidth*60,
marginTop:unitHeight*40,
marginLeft:unitWidth*40
},
view2:{
height:unitHeight*36,
width:unitWidth*140,
// marginLeft:unitWidth*4,
marginTop:unitHeight*4,
backgroundColor:'gray',
borderRadius:unitWidth*60,
marginLeft:unitWidth*10
},
text2:{
fontSize:unitWidth*24,
marginTop:unitHeight*2,
color:'white',
fontWeight:'200',
marginLeft:unitWidth*10
},
text3:{
marginTop:unitHeight*60,
marginLeft:unitWidth*20,
fontSize:unitWidth*30,
color:'white'
},
view3:{
flexDirection:'row',
marginTop:unitHeight*10,
marginLeft:unitWidth*20,
height:unitHeight*30,
width:unitWidth*200,
},
text4:{
fontSize:11,
color:'white',
height:unitHeight*30
},
image1:{
width:unitWidth*140,
resizeMode:'contain',
height:unitHeight*140,
marginLeft:unitWidth*16,
marginTop:unitHeight*20
},
text1:{
color:'lightgrey',
fontSize:unitWidth*26,
marginTop:unitHeight*10,
},
top32:{
width:unitWidth*300,
height:unitHeight*260,
marginTop:unitHeight*40,
marginLeft:unitWidth*40
},
middle:{
width:unitWidth*750,
height:unitHeight*400,
backgroundColor:'white',
marginTop:unitHeight*14
},
middle1:{
width:unitWidth*750,
height:unitHeight*140,
flexDirection:'row'
},
middle13:{
width:unitWidth*600,
height:unitHeight*110,
marginLeft:unitWidth*20,
marginTop:unitHeight*20
},
middle2:{
width:unitWidth*600,
height:unitHeight*52,
marginLeft:unitWidth*20,
flexDirection:'row',
marginTop:unitHeight*14
},
middle21:{
marginLeft:unitWidth*20,
//textDecorationLine:'underline',
color:'#90ee77',
marginTop:unitHeight*6
},
middle22:{
width:unitWidth*90,
height:unitHeight*30,
marginLeft:unitWidth*314,
backgroundColor:'#90ee99',
color:'white',
borderRadius:unitWidth*6,
fontSize:unitWidth*26,
marginTop:unitHeight*10
},
middle3:{
width:unitWidth*600,
height:unitHeight*60,
flexDirection:'row',
marginTop:unitHeight*60
},
middle211:{
marginLeft:unitWidth*22,
//textDecorationLine:'underline',
color:'red',
marginTop:unitHeight*10
},
middle221:{
width:unitWidth*90,
height:unitHeight*30,
marginLeft:unitWidth*240,
backgroundColor:'lightgray',
color:'white',
borderRadius:unitWidth*6,
fontSize:unitWidth*26,
marginTop:unitHeight*10
},
middle4:{
width:unitWidth*650,
height:unitHeight*200,
flexDirection:'row'
},
middle_2:{
width:unitWidth*750,
height:unitHeight*700,
backgroundColor:'white',
marginTop:unitHeight*14
},
middle_11:{
width:unitWidth*600,
height:unitHeight*60,
flexDirection:'row',
marginTop:unitHeight*120
},
image:{
resizeMode:'contain',
width:unitWidth*750,
marginTop:unitHeight*-170
},
text_tiezi:{
fontSize:unitWidth*32,
marginLeft:unitWidth*20,
marginTop:unitHeight*-150
},
fenxiang:{
marginLeft:unitWidth*35,
resizeMode:'contain',
width:unitWidth*40,
marginTop:unitHeight*-10
},
touchableHighlight:{
marginTop:unitHeight*50,
marginLeft:unitWidth*34,
height:unitHeight*180,
width:unitWidth*200,
borderColor:'#90ee90',
borderRadius:unitWidth*10,
borderWidth:unitWidth*2,
backgroundColor:'white'
},
middleadd:{
width:unitWidth*750,
height:unitHeight*460,
backgroundColor:'white',
marginTop:unitHeight*16
},
image5_2:{
marginLeft:unitWidth*16,
marginTop:unitHeight*2
},
man:{
resizeMode:'contain',
height:unitHeight*260,
width:unitWidth*200,
marginLeft:unitWidth*20
},
man1:{
resizeMode:'contain',
height:unitHeight*260,
width:unitWidth*200,
marginLeft:unitWidth*20
},
image2:{
resizeMode:'contain',
marginLeft:unitWidth*20,
height:unitHeight*260,
width:unitWidth*200
},
view_modal:{
height:unitHeight*500,
backgroundColor:'white',
marginTop:unitHeight*840,
position:'absolute',
justifyContent:'flex-start'
},
view_modal2:{
height:unitHeight*80,
width:unitWidth*680,
// backgroundColor:'#eeeeee',
marginLeft:unitWidth*40,
marginTop:unitHeight*30,
flexDirection:'row'
},
footer: {
flexDirection: 'row',
height: unitHeight*48,
justifyContent: 'center',
alignItems: 'center',
marginBottom: unitHeight*20,
},
zanwu:{
flex:1,
justifyContent:'center',
alignItems:'center',
marginTop:unitHeight*60,
},
hidden:{
display:'none'
},
animating:{
flexDirection:'row',
flex:1,
justifyContent:'center',
},
centering: {
alignItems: 'center',
justifyContent: 'center',
padding: unitHeight*16,
},
bigbox:{
display:'flex',
},
box:{
borderStyle:'solid',
borderWidth:unitHeight*2,
borderColor:'#e9e7e7',
width:'96%',
marginLeft:'2%',
height:unitHeight*200,
marginTop:unitHeight*20,
borderRadius:unitHeight*10,
},
boxtop:{
width:'100%',
borderBottomWidth:unitHeight*2,
borderStyle:'solid',
borderColor:'#e9e7e7',
height:unitHeight*80,
},
boxtopo:{
width:'90%',
marginLeft:'5%',
height:unitHeight*78,
flexDirection:'row',
},
boxtopoo:{
flex:1,
lineHeight:unitHeight*78,
},
boxtopot:{
lineHeight:unitHeight*78,
fontSize:unitHeight*36,
},
boxtopos:{
lineHeight:unitHeight*78,
textAlign:'right',
fontSize:unitHeight*36,
},
boxbottom:{
width:'90%',
marginLeft:'5%',
height:unitHeight*120,
},
boxbottomo:{
width:'100%',
height:unitHeight*60,
},
boxbottomfont:{
lineHeight:unitHeight*60,
},
});
写回答
1回答
-
CrazyCodeBoy
2020-01-10
不建议将两个都是滚动的列表嵌套在其使用,会带来各种的问题,建议使用flatlist结合它的header来代替多列表的嵌套。
10
相似问题