그러나, 나는 마지막 항목은 항상 조금 떨어져 있음을 발견했습니다, 나는 사람들의 목록을 볼 수 FlatList을 사용하고

Question

목록의 마지막 항목을 볼 수 없음 그것을보기 위해 꼭대기에 오르십시오. 이 화면은 헤더가있는 stackNavigator 내에 있습니다. 그것이 문제일까요? 그것을 해결하는 방법?

나는 FlatList에서 marginBottom : 40을 시도했지만 아무 것도 변경하지 않았습니다.

코드 : paddingBottom (또는 위)와

let renderRow = ({item}) => { 
    return (
     <View style={{flexDirection: "row", justifyContent: "space-between"}}> 

      <TouchableOpacity style={{ flexDirection: "row", justifyContent: "flex-start", marginLeft: 10}} onPress={this.myFunction.bind(this, item)} > 
       <View style={{}}> 
        <Image style={styles.Image} source={{uri: item.Image}} /> 
       </View> 

       <View style={{ marginTop: 15, marginLeft: 10}}> 
        <Text >{item.name}</Text> 
       </View> 

      </TouchableOpacity> 
     </View> 
    ); 
} 

return(
    <FlatList style={{marginTop: 10, backgroundColor: "white"}} 
     keyExtractor={(item, index) => item.id} 
     data={this.state.result}       
     renderItem={renderRow.bind(this)} 
     ItemSeparatorComponent={renderSeparator.bind(this)} 
    /> 
) 

, 지금은 마지막 두 항목이 표시되지 않습니다 :

당신은 추가 할 필요가

Answer 1

paddingBottom 또는 marginBottom ~ FlatList을 설계에 적합한 값으로 설정하십시오.

// Some padding amount that is suitable for your design 
<FlatList style={{marginTop: 10, backgroundColor: "white", paddingBottom: 40}} 
    keyExtractor={(item, index) => item.id} 
    data={this.state.result}       
    renderItem={renderRow.bind(this)} 
    ItemSeparatorComponent={renderSeparator.bind(this)} 
/>