如何将按钮与中心对齐以响应本机平面列表

Posted 2021-04-03

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

这是我的代码

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

但问题是当加载平板列表然后按钮就像这样.

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

任何人都可以帮我如何保持按钮在中心，即使正在加载平板列表。

答案

你的styles.container丢失了。

您在该视图上的样式必须具有flex：1或height：'100％'属性

另一答案

以下是代码https://snack.expo.io/@msbot01/supportive-cake的工作示例

示例代码

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