взять кнопку в центре нижнего колонтитула FlatList - PullRequest
Новая
       8

взять кнопку в центре нижнего колонтитула FlatList

0 голосов
/ 10 мая 2018

У меня проблема с этой кнопкой в ​​нижней части 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 голосов
/ 10 мая 2018

Пожалуйста, примените это 

footerStyle: {
 flex: 1
 alignItems: 'center'
}

И удалить все стили для TouchableOpacity и Текст

...