React native flatlist last item visibility issue

我正在提取產品列表，然後使用列表顯示，我的列表包含5個項目，正如您所看到的，扁平列表行高因可變描述文本而變化。所以問題是我的最後一個項目卡是不完全可見的，可能是這是某種平面列表問題或佈局問題。任何幫助將高度讚賞React native flatlist last item visibility issue

renderProducts() { 
 
     if (this.props.loading === true) { 
 
      return (
 
       <View style={Styles.spinnerStyle}> 
 
        <ActivityIndicator size='large' /> 
 
       </View> 
 
      ); 
 
     } 
 

 
     return (
 
       <FlatList 
 
        data={this.props.myProducts} 
 
        keyExtractor={(item) => item.id} 
 
        renderItem={({ item }) => (
 
         <Card 
 
          title={item.title} 
 
          image={{ 
 
           uri: item.image !== null ? item.image.src :'../resImage.jpg' 
 
          }} 
 
         > 
 
          <Text style={{ marginBottom: 10 }}> 
 
           {item.body_html} 
 
          </Text> 
 
          <Button 
 
           icon={{ name: 'code' }} 
 
           backgroundColor='#03A9F4' 
 
           fontFamily='Lato' 
 
           buttonStyle={{ borderRadius: 0, marginLeft: 0, marginRight: 0, marginBottom: 0 }} 
 
           title='VIEW NOW' 
 
          /> 
 
         </Card> 
 
        )} 
 
       /> 
 
     ); 
 
    } 
 
    
 
    render() { 
 
     return (
 
      <View> 
 
       <View style={Styles.viewStyle}> 
 
        <Text style {Styles.textStyle}>ProductsList</Text> 
 
       </View> 
 
        { 
 
         this.renderProducts() 
 
        } 
 
      </View> 
 
     ); 
 
    }

來源

2017-09-13 Muhammad Talha

_「......你可以看到」 _我們實際上並不能因爲你沒有發佈任何代碼。 – bennygenel

現在來看看。 –

嘗試向「FlatList」組件的底部添加填充。 '' – bennygenel

加{柔性：1}在查看標籤住房Flatlist組件。

在我的情況下，

const App =() => { 
    return (
    <Provider store={createStore(reducers)}> 
    <View style={{ flex: 1 }}> 
     <Header headerText={'My App'} /> 
     <ScreenTabs /> // this is my content with FlatList 
    </View> 
    </Provider> 
); 
}; 

export default App;

來源

2017-12-26 09:55:16 Ashish

React native flatlist last item visibility issue

回答

相關問題