Реагируйте Родные центральные кнопки выравнивают одну под другой - PullRequest
Новая
       10

Реагируйте Родные центральные кнопки выравнивают одну под другой

0 голосов
/ 27 февраля 2020

Я начал использовать React native и React native Elements. Я пытаюсь, чтобы кнопки располагались одна под другой с небольшим промежутком между кнопками и левой и правой сторонами. 

<View style={styles.container}>
    <ThemeProvider>
        <Button
            buttonStyle={styles.btnStyle}
            icon={
                <Icon
                name="arrow-right"
                size={15}
                color="white"
                />
            }
            title="My BTN 1"
        />
        <Button
            buttonStyle={styles.btnStyle}
            icon={
                <Icon
                name="arrow-right"
                size={15}
                color="white"
                />
            }
            title="My BTN 2"
        />
        <Button
            buttonStyle={styles.btnStyle}
            icon={
                <Icon
                name="arrow-right"
                size={15}
                color="white"
                />
            }
            title="My BTN 3"
        />
    </ThemeProvider>
</View>

И стили: 

const styles = StyleSheet.create({
    container: {
        flex: 1,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center',
    },
    btnStyle: {
        marginBottom: 5,
        width: '90%'
    }
});

Отображается одна рядом с другой и не уважая размер мобильного устройства.

Спасибо

1 Ответ

1 голос
/ 27 февраля 2020

Вам нужно удалить это из таблицы стилей 

flexDirection: 'row'

Или просто измените его на 

flexDirection: 'column'
...