Question

我尝试了具有类似问题的其他解决方案，但没有一个对我有用。我的平面列表没有滚动到底部，并且随着我向下滚动，滚动条从屏幕中移出。在平面列表中，属于同一天的item（LoneAlert）组件在顶部具有Date分隔符（Separator）组件。

随着列表中项目数量的增加，被下推的项目数量也增加了。例如：如果列表包含10个项目，则下推1个项目，如果列表中包含25个项目，则下推3个项目。如果我删除页眉组件，那么它将正常工作。但是我不知道如何解决这个问题。我该怎么做？

我尝试将flatList组件与一个视图包装在一起，并向该视图提供flex：1，但是它不起作用。

在App.js中，（没有样式）。

return (
  <View>
    <AlertList allAlert={this.state.alerts}/>
  </View>
);

在AlertList.js中

_renderItem = ({item, index}) => {
    console.log(index);
    console.log(item);
    // if the alert day is equal to current day or 
    // alert day is equal to previous day or
    // first alert day in the array is equal to current  day
    // separator bar display none for that alert by passing props showSeparator

    if(current_day == item.alert_time.toDate().getDay()
    || index > 0 &&item.alert_time.toDate().getDay() == all_alerts[index -1].alert_time.toDate().getDay()
    || index==0 && item.alert_time.toDate().getDay() == current_day ){
        return (
            <LoneAlert
            alertObject = {item} showSeparator ={false}/>
        )
    }else{
        return(
            <LoneAlert
            alertObject = {item} showSeparator ={true}/>
        )
    }
};

checkConnection = () =>{
    if (netInfo.isConnected == false || netInfo.isReachable == false ){
        return <ConnectionMsg/>
    }else{
        return(
            <View>
                <HeaderBar/>
                <View style = {{ flex:1 }}>
                    <FlatList data={props.allAlert}
                    renderItem = {this._renderItem}
                    />
                </View>
            </View>
        );
    }
};


return(
    <View>
        {this.checkConnection()}
    </View>
);
};

export default AlertList;

在LoneAlert.js中（侧列表中的项目）

return(
    <View>
        <View>
            {this.renderTimeSeparator(props.alertObject.alert_time.toDate(), props.showSeparator)}
        </View>
        <View style = {styles.wrapper}>
            <View style = {styles.alertImageWrapper}>
                {this.renderAlertImage(props.alertObject.alert_reason,70,70,'alertImage')}
            </View>
            <View style = {styles.textWrapper}>
                <Text style = {styles.bedNumber}>{props.alertObject.bedNo}</Text>
                {this.capitalizeAlertMessage(props.alertObject.alert_reason, styles.alertMessage)}
                <Text style = {styles.dateTime}>{this.timeFormatConverter(props.alertObject.alert_time.toDate())}</Text>
            </View>
            <View style = {styles.dismissalWrapper}>
                {this.renderDismissalImage(props.alertObject.dismissal_reason,30,30,styles.dismissalImage)}
                {this.renderDismissalText(props.alertObject.dismissal_reason, styles.dismissalText)}
            </View>
        </View>
    </View>
);
};

const styles = StyleSheet.create({
wrapper:{
    flexDirection: 'row',
    padding: 10,
    paddingRight:0,
    borderBottomWidth: 1,
    borderBottomColor: "#D0D0D0",
    backgroundColor: '#E7EAED',
},
alertImageWrapper:{
    // backgroundColor: "red",
    height:"100%",
    width:60,
    marginRight: 13,
    flexDirection: 'row',
    alignItems: 'center'

},
alertImage:{
},
textWrapper:{
    // backgroundColor:"green"
    paddingLeft: 15
},

bedNumber:{
    color:"#434343",
    fontFamily:"Arial",
    fontWeight:'bold',
    fontSize: 24,
},
alertMessage:{
    color:"#434343",
    fontFamily:"Arial",
    fontWeight:'bold',
    fontSize: 14,
},
dateTime:{
    color:"#434343",
    fontFamily:"Arial",
    fontSize: 14,
},

dismissalWrapper:{
    marginLeft: 'auto',
    // backgroundColor:"green",
    width:70,

},

dismissalImage:{
    marginLeft: 'auto',
    marginRight:'auto',
    // backgroundColor:"red"
},

dismissalText:{
    // backgroundColor:"blue",
    textAlign: 'center'
}
});

export default LoneAlert;

在Separator.js

render(){
return(
        <View style={styles.Bar}>
            <Text style ={styles.dateStyle}>{this.props.date[0]}, 
{this.props.date[1]} {this.props.date[2]}</Text>
        </View>
        );
    }

}
const styles = StyleSheet.create({
Bar:{
    // height: 34,
    paddingTop: 5,
    paddingLeft: 10,
    // backgroundColor: "#7C7C7C",
    backgroundColor: '#E7EAED',
    fontFamily:"Arial",
    fontWeight:'bold',
    fontSize: 14,
    color:"#FFFFFF",
    textAlign: "center",
    flexDirection: 'row',
    alignItems: 'center'
},
dateStyle:{
    // backgroundColor: 'blue',
    color:"#9B9B9B",
    fontWeight:'bold',
}
});

export default Separator;

在HeaderBar.js中

const HeaderBar = (props) => {
return(
    <View>
        <View style={styles.HeaderBar}>
            <Image style = {styles.spIcon} source={require('../../assets/images/smartPeep-icon.png')}/>
            <Text style = {styles.alertTitle}>
            Alert history
            </Text>
        </View>
        <View style = {styles.FirstSeparator}>
                <Text style = {styles.AlertDetailLabel}>Alert Type</Text>
                <Text style = {styles.DismissalLabel}>Resolved by</Text>
        </View>
    </View>
)
};  

const styles = StyleSheet.create({
HeaderBar:{
    width: "100%",
    padding: 7,
    backgroundColor:"#E7EAED",
    height:58,
    flexDirection: 'row',
    alignItems: "center"
},
spIcon:{
    width: 40,
    marginRight: 22,
    height: "100%",
    // backgroundColor: "green"
},
alertTitle:{
    maxWidth:180,
    fontFamily:"Arial",
    fontWeight:'bold',
    fontSize: 18,
    // backgroundColor: "blue"
},
FirstSeparator:{
    height: 35,
    backgroundColor:"#434343",
    flexDirection: 'row',
},
AlertDetailLabel:{
    // backgroundColor:"red",
    fontFamily:"Arial",
    fontSize: 14,
    color: "white",
    textAlignVertical:'center',
    paddingLeft: 10

},
DismissalLabel:{
    marginLeft: 'auto',
    fontFamily:"Arial",
    fontSize: 14,
    color: "white",
    textAlignVertical:'center',
    paddingRight: 10
}

});

export default HeaderBar;

Answer 1

好的，我能够通过在App.js中的View上添加flex：1并将其高度设置为AlertList.js中父视图的100％来解决此问题

App.js

<View style = {{ flex: 1}}>
    <AlertList allAlert={this.state.alerts}/>
  </View>

AlerList.js

 <View style  =  {{ height:"100%"}}>
  <HeaderBar/>
  <FlatList data={props.allAlert}
   renderItem = {this._renderItem}
  />
 </View>

没有向下滚动到底部

1 个答案: