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

Question

我需要一些帮助来了解 CSS 在 React Native 中的应用方式。它似乎不像网络中的普通 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 位置执行此操作时，这并没有奏效。

I'm really confused why it's not just using the styles I pass in at the child-most location. Why is it not even making the background blue?

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

Answer 1

要使文本居中，请使用

textAlign: 'center'

另见 this answer