Как решить проблему с маржой между двумя компонентами внутри модального окна в React-Native?

В моем реактивном проекте внутри модального окна я использую две кнопки в представлении. Но проблема в том, что между ними не работает маржа.

Вот код

<View style = {styles.container}>
    <Modal 
        animationType = {"slide"} 
        transparent = {false}
        visible = {this.state.ModalVisibleStatus}
        onRequestClose = {() => { console.info("Modal has been closed.") }}
    >
        {/*All views of Modal*/}
        {/*Animation can be slide, slide, none*/}
        <View style = {styles.modal}>
            <Text style = {styles.text}>Modal is open!</Text>

            <View style = {styles.inputContainerEmail}>
                <Image style = {styles.inputIcon} source = {{ uri: this.state.catImage }} />
                <TextInput style = {styles.inputs}
                    placeholder = "Email Address"
                    keyboardType = "email-address"
                    underlineColorAndroid='transparent'
                    onChangeText = {(text) => this.updateValue(text, 'email')} />
            </View>

            <View style = {{ flexDirection: 'row' }}>
                <Button style = {{ marginRight: 10 }} title = "Save" onPress = {() => {
                    this.setState({ ModalVisibleStatus: !this.state.ModalVisibleStatus })
                }} />

                <Button style = {{ marginLeft: 10 }} title = "Close" onPress = {() => {
                    this.setState({ ModalVisibleStatus: !this.state.ModalVisibleStatus })
                }} />
            </View>
        </View>
    </Modal>
</View>


const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#DCDCDC',
    },
    modal: {
        flex: 1,
        alignItems: 'center',
        backgroundColor: '#aaaa',
        padding: 100
    },
    text: {
        color: '#3f2949',
        marginTop: 10
    }
)}

После запуска этого кода он получает следующий вывод:

Как решить проблему с маржой между двумя компонентами внутри модального окна в React-Native?

Итак, как я могу добавить отступ между этими двумя кнопками?

javascript react-native

09.04.2019 19:25

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

343

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

React-Native Button очень ограничен в том, что вы можете сделать, и, насколько я знаю, пока не поддерживает свойство стиля. Я бы посоветовал изучить использование TouchableOpacity или TouchableNativeОтзывы для настройки ваших потребностей.

Потенциально более грязным решением было бы обернуть оба Buttons внутри отдельного отдельного родительского View компонента и вместо этого применить ваше свойство margin к этим родительским View компонентам. В качестве альтернативы вы могли бы указать justifyContent:'space-between' в своем родительском компоненте View как есть и посмотреть, даст ли это желаемый результат. Например, подход с несколькими представлениями может выглядеть примерно так:

<View style = {{flexDirection: 'row'}}>
    <View style = {{flex:1 , marginRight:10}} >
         <Button title = "Save" onPress = {() => {
                this.setState({ ModalVisibleStatus: !this.state.ModalVisibleStatus })
         }} />
    </View>
    <View style = {{flex:1}} >
        <Button title = "Close" onPress = {() => {
                this.setState({ ModalVisibleStatus: !this.state.ModalVisibleStatus })
        }} />
    </View>
</View>

Надеюсь, это поможет!

Большое спасибо за сообщение об ограничении Button. Я легко решил это, используя TouchableOpacity.

— 09.04.2019 20:11

И я попробовал код, который вы предоставили, он также работает :)

— 09.04.2019 20:13

09.04.2019 19:44

Добавьте justifyContent:"space-between" в код представления кнопки как

<View style = {{ flex:1, flexDirection: 'row' , justifyContent:"space-between"}}>
                <Button style = {{ flex:1}} title = "Save" onPress = {() => {
                    this.setState({ ModalVisibleStatus: !this.state.ModalVisibleStatus })
                }} />

                <Button style = {{ flex:2 }} title = "Close" onPress = {() => {
                    this.setState({ ModalVisibleStatus: !this.state.ModalVisibleStatus })
                }} />
            </View>

Ссылка для ознакомления https://css-tricks.com/almanac/properties/j/justify-content/

09.04.2019 19:56