当父组件已经定义了样式时，CSS 未按预期在 React Native 中应用

Question

我需要一些帮助来了解如何在 React Native 中应用 CSS。它似乎不像 web 中的普通 CSS 那样工作。

基本上，我有一个<CardSection> 组件被导入到这个<LoginForm /> 中

这是它的代码：

CardSection.js 导出：

const CardSection = ({ children }) => {
    const { containerStyle } = styles
    return (
        <View style={containerStyle}>
            {children}
        </View>
    )
}

const styles = {
    containerStyle: {
        borderBottomWidth: 1,
        padding: 5,
        backgroundColor: '#fff',
        justifyContent: 'flex-start',
        flexDirection: 'row',
        borderColor: '#ddd',
        position: 'relative'
    }
}

我无法覆盖在此父组件中定义的样式（或者它可能继承的样式）在子元素内。

这是不正确的代码：

LoginForm.js：

renderError() {
    const { errorContainerStyle, errorTextStyle } = styles
    const { error } = this.props

    if (error) return (
        <CardSection style={errorContainerStyle}>
            <Text style={errorTextStyle}>
                {error}
            </Text>
        </CardSection>
    )
}

render() {
    return (
        <Card>
            <CardSection>
                // code removed
            </CardSection>

            <CardSection>
                // code removed
            </CardSection>

            {this.renderError()}

            <CardSection>
                {this.renderLoginButton()}
            </CardSection>
        </Card>
    )
}

这是我目前的造型尝试。我正在尝试center 错误文本，但它不会移动。无论我在errorContainerStyle 上放置什么属性，它都保持在左侧。

const styles = {
    errorContainerStyle: {
        flex: 1,
        lineHeight: 20,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: 'blue',
        alignText: 'center',
        paddingLeft: 10
    },
    errorTextStyle: {
        flex: 1,
        fontSize: 20,
        lineHeight: 20,
        justifyContent: 'center',
        alignItems: 'center',
        color: 'red',
    }
}

我阅读并发现了一些传递一组样式的证据，但是当我在每个/两个 CardSection 位置都这样做时，这不起作用。

我真的很困惑，为什么不只是使用我在最靠近孩子的位置传入的样式。为什么连背景都不蓝？

它是 React 16、React Native 0.49 和 Android API 级别 23 (Marshmallow)

Answer 1

要使文本居中，请使用

textAlign: 'center'

另见this answer

Answer 2

要居中对齐，请使用以下命令：

textAlign: 'center' !important ;

或根据您的代码使用下面给出的同一行代码

const styles = {
errorContainerStyle: {
    flex: 1,
    lineHeight: 20,
    justifyContent: 'center' !important,
    alignItems: 'center'!important,
    backgroundColor: 'blue',
    alignText: 'center'!important,
    paddingLeft: 10
},
errorTextStyle: {
    flex: 1,
    fontSize: 20,
    lineHeight: 20,
    justifyContent: 'center' !important,
    alignItems: 'center' !important,
    color: 'red',
}
}

这应该可以工作