如何将FlatList的ListFooterComponent中按钮居中？求助

我现在遇到一个棘手的问题：FlatList的ListFooterComponent（页脚）中的按钮怎么都没法居中，试了各种布局调整都没成功，实在没办法来求助大家了！

当前效果：按钮未居中，呈现左对齐状态，页脚背景为黑色，但按钮并未处于容器的中心位置。

我的代码：

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

样式代码：

const s = StyleSheet.create({
  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, 
  }
})

恳请各位提供帮助，谢谢！

内容的提问来源于stack exchange，提问作者Riddhi