ネイティブフラットリストに最後のアイテムの可視性問題に反応する

Question

商品リストを取得してフラットリストを使用して表示すると、リストに5つのアイテムが表示され、フラットリストの行の高さはさまざまな説明テキストのため可変です。だから問題は私の最後のアイテムカードが完全に見えないことですこれはフラットリストの問題やレイアウトの問題のいくつかの種類かもしれません。 Flatlist成分を収容する表示タグに：任意の助けは非常

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> 
 
     ); 
 
    }

Answer 1

追加{1フレックス}を理解されるであろう。私の場合は

、

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;