javascript - React Native 样式和 Flex——使组件居中

Question

我很难弄清楚为什么我的样式表没有按照我想要的方式工作——我希望图标 [注意评论] 以及底部的按钮都居中显示，但两者目前都出现左对齐。将不胜感激任何+所有方向。

这是我的进口：

import { useNavigation } from '@react-navigation/native';
import React from 'react';

import {
    Text,
    SafeAreaView,
    ScrollView,
    View,
    TouchableOpacity,
    ActivityIndicator,
    Alert
} from 'react-native';
import { withNavigation } from 'react-navigation';
import { firebase } from '../../../../firebase/config';
import styles from './styles';
import DateTimePicker from '@react-native-community/datetimepicker';
import { Sae } from 'react-native-textinput-effects';
import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome';
import { FontAwesome } from '@expo/vector-icons'

这是从我的类组件返回的代码：

<SafeAreaView style={styles.container}>
                <ScrollView>
                    <View style={styles.inputContainer}>
                        <View>
                            <Text style={styles.title}>Create An Event</Text>
                        </View>
                        <Sae
                            style={{marginLeft: 10, marginRight: 10, marginBottom: 10}}
                            labelStyle={{color: '#656565'}}
                            label={'Event Name'}
                            iconClass={FontAwesomeIcon}
                            iconName={'calendar-check-o'}
                            iconColor={'#e95530'}
                            inputPadding={16}
                            labelHeight={20}
                            borderHeight={2}
                            autoCapitalize={'none'}
                            autoCorrect={false}
                        />
                        <Sae
                            style={{marginLeft: 10, marginRight: 10}}
                            labelStyle={{color: '#656565'}}
                            inputStyle={{fontSize: 16}}
                            label={'Event Description'}
                            iconClass={FontAwesomeIcon}
                            iconName={'pencil'}
                            iconColor={'#e95530'}
                            inputPadding={16}
                            labelHeight={20}
                            borderHeight={2}
                            autoCapitalize={'none'}
                            autoCorrect={false}
                        />

                        <View style={styles.break1}></View>
                        <View style={styles.break2}><FontAwesome name='circle' color='#e6a80c'/></View> //would like this icon to be centered
                        <View style={styles.break3}></View>
                        
                        <View style={styles.indInputContainer}>
                            <Text style={styles.text}>Date </Text>
                            <DateTimePicker
                                testID='datePicker'
                                value={this.state.date}
                                mode='date'
                                is24Hour={true}
                                display='default'
                                onChange={this.onChange}
                                placeholder='Select a date'
                                style={{ marginHorizontal: 10 }}
                            />
                        </View>

                        <View style={styles.indInputContainer}>
                            <Text style={styles.text}>Start Time </Text>
                            <DateTimePicker
                                testID='timePicker'
                                value={this.state.eventStartTime}
                                mode='time'
                                is24Hour={true}
                                display='default'
                                onChange={this.onChange}
                                placeholder='Start time'
                                style={{ marginHorizontal: 10 }}
                            />
                        </View>

                        <View style={styles.indInputContainer}>
                            <Text style={styles.text}>End Time </Text>
                            <DateTimePicker
                                testID='timePicker'
                                value={this.state.eventEndTime}
                                mode='time'
                                is24Hour={true}
                                display='default'
                                onChange={this.onChangeEventEndTime}
                                placeholder='End time'
                                style={{ marginHorizontal: 10 }}
                            />
                        </View>

                        <View style={styles.indInputContainer}>
                            <Text style={styles.text}>Guests' Votes Due By </Text>
                            <DateTimePicker
                                testID='datePicker'
                                value={this.state.votingDeadline}
                                mode='date'
                                is24Hour={true}
                                display='default'
                                onChange={this.onChangeVotingDeadline}
                                placeholder='Votes Due By'
                                style={{ marginHorizontal: 10 }}
                            />
                        </View>
                    </View>
                    <View style={styles.buttonContainer}> //would like this button to appear centered also
                        <TouchableOpacity
                            style={styles.button}
                            onPress={() => this.storeEvent()}
                        >
                            <Text style={styles.Btn}>Create Event</Text>
                        </TouchableOpacity>
                    </View>
                </ScrollView>
            </SafeAreaView>

这是样式表：

export default StyleSheet.create({
    container: {
        backgroundColor: '#ffffff',
        flex: 1,
        justifyContent: 'center'
    },
    inputContainer: {
        padding: 10
    },
    indInputContainer: {
        margin: 8
    },
    break1: {
        marginBottom: 20,
        marginTop: 20
    },
    break2: {
        alignContent: 'center',
        justifyContent: 'center'
    },
    break3: {
        marginTop: 10,
        marginBottom: 10
    },
    text: {
        fontSize: 16,
        color: '#656565',
    },
    preferences: {
        fontWeight: 'bold',
        fontSize: 20,
        margin: 5,
    },
    title: {
        padding: 5,
        fontSize: 16,
        fontWeight: 'bold',
        color: '#e95530'
    },
    buttonContainer: {
        justifyContent: 'center',
        alignContent: 'center'
    },
    button: {
        backgroundColor: '#e95531',
        margin: 10,
        marginTop: 20,
        height: 48,
        borderRadius: 5,
        alignItems: 'center',
        justifyContent: 'center',
        width: 275,
    },
    Btn: {
        color: 'white',
        fontSize: 16,
        fontWeight: 'bold',
    },
    preloader: {
        left: 0,
        right: 0,
        top: 0,
        bottom: 0,
        position: 'absolute',
        alignItems: 'center',
        justifyContent: 'center',
    },
});

将非常感谢一些帮助。谢谢！