使用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:unitHeight
2780,
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来代替多列表的嵌套。

1
0

RN入门到进阶,打造高质量上线App

解锁React Native开发应用新姿势,React Native新版本热门技术

3144 学习 · 3241 问题

查看课程