Почему элемент Text не центрируется вертикально внутри View? - PullRequest
Новая
       27

Почему элемент Text не центрируется вертикально внутри View?

1 голос
/ 24 января 2020

С помощью response-native я создал пользовательскую кнопку следующим образом: 

import React, {Component, Fragment} from 'react';

import globalStyles from './../../globals/styles'

import {
    Text,
    View,
    TouchableOpacity,
    StyleSheet
} from 'react-native';

export default class MyButton extends Component {
    render() {
        return (
            <TouchableOpacity style={styles.opacitySurface} onPress={this.props.customAction}>
                <View style={styles.textContainer}>
                    <Text style={styles.text}>{this.props.buttonText}</Text>
                </View>
            </TouchableOpacity>
        )
    }
}

let buttonFontSize = 10;

const styles = StyleSheet.create({
        textContainer: {
            justifyContent: 'center',
            alignItems: 'center',
        },
        opacitySurface: {
            backgroundColor: globalStyles.colors.customerGreen,
            width: "25%",
            height: 60,
            padding: 10,
            borderRadius: 10,
            shadowColor: '#000',
            shadowOffset: { width: 0, height: 0 },
            shadowOpacity: 0.8,
            shadowRadius: 1.5
        },
        text: {
            textAlign: 'center',
            fontFamily: globalStyles.fonts.OpenSans,
            color: 'white',
            fontSize: buttonFontSize,
        }
    }
);

Но текст внутри этой кнопки не выравнивается по вертикали. Предпосылка: я новичок в реактивном родном языке, и я почти уверен, что упустил что-то действительно глупое.

enter image description here

Ответы [ 3 ]

2 голосов
/ 24 января 2020

Чтобы свойства justifyContent и alignItems работали, они должны быть на элементе с display: flex.

То, что выравнивает текст по центру, это свойство textAlign: 'center' на style.text

Используйте display: 'flex' и flex: 1 на вашем style.textContainer

textContainer: {
    display: 'flex'
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
}
1 голос
/ 24 января 2020

Добавить flex: 1 в вашем textContainer стиле: 

textContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
}
1 голос
/ 24 января 2020

добавьте css к вашей непрозрачностиПоверхность 

display: "flex",
justifyContent: "center",
alignItems: "center"

она сделает ваш текст в центре

...