在FlatList页脚

时间:2018-05-10 06:39:08

标签: reactjs react-native react-native-flatlist

我在FLatList的页脚(此处ListFooterComponent)底部遇到一个问题。我尝试了所有解决方案,但我失败了。

我的输出 https://i.stack.imgur.com/Hn4PW.jpg

我的代码

_renderItem(rowData) {
    return(
        <View style={{ flex: 1}}>
            <View style={s.cate_detail_box}>
                <TouchableOpacity activeOpacity={0.9} style={{height: 190}}>
                    <Image source={{uri: rowData.item.images[0].src}} style={s.img}/>
                </TouchableOpacity>
                <View style={{padding: 5}}>
                    <View activeOpacity={0.9} style={{flexDirection: 'row', justifyContent: 'space-between'}}>
                        <View>
                            <CapitalizedText style={s.cate_detail_title}>{rowData.item.title}</CapitalizedText>
                            <Text style={s.cate_detail_price}>{'₹' + rowData.item.variants[0].price}</Text>
                        </View>
                        <TouchableOpacity activeOpacity={0.7} >
                            <Icon size={icon_size} color="#aaa" name="turned-in-not" />
                        </TouchableOpacity>
                    </View>
                </View>
            </View>
        </View>
    );
}

_render_Footer = () => {
    return (
        <View style = { s.footerStyle }>
            <TouchableOpacity 
                 activeOpacity = { 0.7 } 
                 style = { s.btn_load_more }
                 onPress = { this.fetch_more_data_from_server } 
            >
               <Text style = { s.btn_load_more_txt }>Load More</Text>
           </TouchableOpacity> 
        </View>
    )
}

render() {
   return(
      <ScrollView showsVerticsalScrollIndicator={false} style={s.category_detail_scroll} contentContainerStyle={{ flexGrow: 1}}>
        <View>
          {
            this.state.product_detail.length <= 0 ?
                <ActivityIndicator color = '#bc2b78' size = "large" style={{alignItems: 'center', justifyContent: 'center'}} />
            :
                <FlatList
                  contentContainerStyle={s.list}
                  keyExtractor = {( item, index ) => index.toString() }
                  data = { this.state.product_detail }
                  renderItem = {(rowData) => this._renderItem(rowData)}
                ListFooterComponent = { this._render_Footer }
               />
           }
        </View>
    </ScrollView>
);
}

CSS

cate_detail_box: {
    margin: 2, 
    width: 180, 
    backgroundColor: '#fff', 
    borderWidth: 1, 
    borderColor: '#aaa',
},
cate_detail_title: {
    color: '#666', 
    fontSize: font_small,
},
cate_detail_price: {
    fontSize: 15,
    color: '#666', 
    justifyContent: 'center', 
    alignItems: 'center',
},
category_detail_scroll: {
    flex: 1,
    backgroundColor: 'rgba(243,229,245, 0.6)',
},
footerStyle:{
   padding: 7,
   width: '100%',
   alignItems: 'center',
   justifyContent: 'center',
   backgroundColor:  '#000',
},
btn_load_more: {
  padding: 7,
  backgroundColor: '#F44336',
  borderRadius: 5,

},

感谢任何帮助。 谢谢。

1 个答案:

答案 0 :(得分:0)

请申请

public async Task<FileResult> PrintPdfStatements(string fileName)
    {
         var fileContent = await GetFileStreamAsync(fileName);
         var fileContentBytes = ((MemoryStream)fileContent).ToArray();
         return File(fileContentBytes, System.Net.Mime.MediaTypeNames.Application.Pdf);
    }

删除 TouchableOpacity 文字

的所有样式