React native 如何将按钮对齐到本地平面列表的中心

我想在平面列表的中心放置一个按钮，如下图所示

这是我的密码

    render() {
            return (
                <View>
                    <View style={styles.separator} />
                    <View style={styles.container}>

                        <FlatList
                            data={this.state.dataSource}
                            keyExtractor={this.keyExtractor}
                            renderItem={this.renderItem}
                            ItemSeparatorComponent={this.renderSeparator.bind(this)}
                        />
                        <View style={styles.buttonContainer}>
                            <TouchableOpacity onPress={Actions.appointmentreminder} style={styles.buttonStyle} >
                                <Image style={{ margin: 5 }} source={require('../assets/proxy_messages_icon.png')} />
                                <Text style={styles.buttonText}>{Strings.SendMessage}</Text>
                            </TouchableOpacity>
                        </View>
                    </View>
                </View>
            );
        }

const styles = StyleSheet.create({
separator: {
        borderRadius: 4,
        borderWidth: 1,
        borderColor: colors.light_gray,
    },
    footerStyle: {
        flexDirection: 'row',
        flex: 1,
        paddingVertical: 10,
        justifyContent: 'flex-end'
    },
    buttonContainer: {
        position: 'absolute',
        top: 0,
        left: 0,
        right: 0,
        bottom: 0,
        justifyContent: 'center',
        alignItems: 'center',
        flexDirection: 'column',
    },
    buttonStyle: {
        margin: 5,
        backgroundColor: colors.light_green,
        borderRadius: 8,
        height: 50,
        width: '60%',
        alignItems: 'center',
        flexDirection: 'row'
    },
    buttonText: {
        color: colors.white,
        fontSize: 16,
    },
});

render（）{
返回(
{Strings.SendMessage}
);
}
const styles=StyleSheet.create({
分离器：{
边界半径：4，
边框宽度：1，
边框颜色：颜色。浅灰色，
},
页脚样式：{
flexDirection:'行'，
弹性：1，
填充垂直：10，
justifyContent:“柔性端”
},
按钮容器：{
位置：'绝对'，
排名：0，
左:0,，
右:0,，
底部：0，
为内容辩护：“中心”，
对齐项目：“居中”，
flexDirection:'列'，
},
按钮样式：{
差额：5，
背景颜色：颜色。浅绿色，
边界半径：8，
身高：50，
宽度：“60%”，
对齐项目：“居中”，
flexDirection:“行”
},
按钮文字：{
颜色：颜色，白色，
尺寸：16，
},
});

但问题是当flatlist加载时，按钮会像这样出现

一旦加载了平面列表，它就会像这样出现

---

有谁能帮助我在加载平面列表时如何将按钮保持在中间。

您的styles.container丢失了

---

该视图上的样式必须具有flex:1或height:'100%'属性

以下是代码的工作示例

示例代码

 import * as React from 'react';
import { Text, View, StyleSheet, TouchableOpacity, FlatList } from 'react-native';
import { Constants } from 'expo';

// You can import from local files
import AssetExample from './components/AssetExample';

// or any pure javascript modules available in npm
import { Card } from 'react-native-paper';

export default class App extends React.Component {

  _renderItem = ({item}) => (
    <View><Text style={{fontSize:80 }}>{item.key}</Text></View>
  );
  _keyExtractor = (item, index) => item.id;
  render() {
            return (
                <View style={{flex:1, backgroundColor:'yellow'}}>
                    <View style={styles.separator} />
                    <View style={{flex:1}}>

                        <FlatList
                            data={[{key: 'a', id:1}, {key: 'b', id:2},{key: 'a', id:3}, {key: 'b', id:4},{key: 'a', id:5}, {key: 'b', id:6},{key: 'a', id:7}, {key: 'b', id:8},{key: 'a', id:9}, {key: 'b', id:10},{key: 'a', id:11}, {key: 'b', id:12},{key: 'a', id:13}, {key: 'b', id:14}]}
                            keyExtractor={this._keyExtractor}
                            renderItem={this._renderItem}
                        />
                        <View style={[styles.buttonContainer]}>
                            <TouchableOpacity style={styles.buttonStyle} >
                                <View style={{ backgroundColor:'red', height:20, width:50 }}>
                                <Text style={styles.buttonText}>SendMessage</Text>
                                </View>
                            </TouchableOpacity>
                        </View>
                    </View>
                </View>
            );
        }
}

const styles = StyleSheet.create({
separator: {
        borderRadius: 4,
        borderWidth: 1,
        borderColor: 'gray',
    },
    buttonContainer: {
        position: 'absolute',
        bottom: 0,
        width:'60%',
        left:'20%',
        right:'20%',
        backgroundColor:'red',
        justifyContent:'center',
        alignItems:'center'
    },
    buttonStyle: {
        margin: 5,
        backgroundColor: 'green',
        borderRadius: 8,
        height: 50,
        width: '60%',
        alignItems: 'center',
        flexDirection: 'row'
    },
    buttonText: {
        color: 'white',
        fontSize: 16,
    }
});

import*as React from'React'；
从“react native”导入{文本、视图、样式表、TouchableOpacity、平面列表}；
从“expo”导入{Constants}；
//可以从本地文件导入
从“./components/AssetExample”导入AssetExample；
//或npm中可用的任何纯javascript模块
从“react native paper”导入{Card}；
导出默认类App扩展React.Component{
_renderItem=（{item}）=>(
{item.key}
);
_keyExtractor=（项，索引）=>item.id；
render（）{
返回(
发送消息
);
}
}
const styles=StyleSheet.create({
分离器：{
边界半径：4，
边框宽度：1，
边框颜色：“灰色”，
},
按钮容器：{
位置：'绝对'，
底部：0，
宽度：'60%'，
左：20%，
右：'20%'，
背景颜色：'红色'，
辩护内容：'中心'，
对齐项目：'center'
},
按钮样式：{
差额：5，
背景颜色：“绿色”，
边界半径：8，
身高：50，
宽度：“60%”，
对齐项目：“居中”，
flexDirection:“行”
},
按钮文字：{
颜色：'白色'，
尺寸：16，
}
});

为您的容器样式提供

flex:1

，或者将buttonContainer移动到最外面的视图。我无法获得使用FlatList的绝对位置；改为ScrollView，效果很好。