javascript - 如何在 React Native 中覆盖父样式

Question

我有一个容器类，我在其中放置了根据容器状态定制的组件。在下面的组件中，我将宽度定义为 width: '100%'但是，在容器类中，我有一个样式表变量，我在其中给出 paddingLeft: 20 paddingRight: 20以使无状态组件更加成形。这是我的无状态组件之一:

const Seperator = props => {
    stt = {
        backgroundColor: props.backgroundColor,
    }
    textstt = {
        color: props.backgroundColor == colors.BLACK
            ? colors.WHITE
            : colors.BLACK
    }
    console.log('I am in seperator, backgroundcolor: ', props.backgroundColor, 'text', props.text, 'textcolor: ', textstt);
    return (
        <View style={[styles.container, stt]}>
            <Text style={[styles.text, textstt]}>{props.text}</Text>
        </View>
    );
};

这就是我使用上面组件的方式。

            <NewAdHoc
                contentText={'Kategori Secimi'}
                onBackPress={this.handleBackPress}
                showContentText={false}
            >
                <View style={styles.container}>
                    {currentCategory !== null
                        ? <View style={styles.flatListContainer}>
                            <ListViewItem
                                categoryName={currentCategory.categoryName}
                                iconName={currentCategory.categoryIcon}
                                showBorder={false}
                                key={currentCategory.categoryId}
                                categoryId={currentCategory.categoryId}
                                inNewAdScreen={false}
                            />
                            <Seperator
                                backgroundColor={colors.BLACK}
                                text={'Ilan Turu'}
                            />
                            {
                                currentCategory.subCategories.map((subc) => (
                                    <SubCategoryItem
                                        text={subc.subCategoryName}
                                        key={subc.subCategoryId}
                                        showBorder={true}
                                    />
                                ))

                            }
                        </View>
                        : null
                    }
                </View>
            </NewAdHoc>

但是有一件事我无法完成，我想要我的<Seperator/>不受styles.flatListContainer影响的paddingLeft和paddingRight样式。

任何帮助将不胜感激，谢谢。

Answer 1

将内边距移至 ListViewItem 的边距。假设您由于某些原因无法编辑 flatListContainer 的样式，并且不想在 ListViewItem 中设置样式。

<NewAdHoc contentText={'Kategori Secimi'} onBackPress={this.handleBackPress} showContentText={false}>
    <View style={styles.container}>
        {currentCategory !== null ? (
            <View style={{ ...styles.flatListContainer, paddingLeft: undefined, paddingRight: undefined }}>
                <View style={{ marginHorizontal: 20 }}>
                    <ListViewItem
                        categoryName={currentCategory.categoryName}
                        iconName={currentCategory.categoryIcon}
                        showBorder={false}
                        key={currentCategory.categoryId}
                        categoryId={currentCategory.categoryId}
                        inNewAdScreen={false}
                    />
                </View>
                <Seperator backgroundColor={colors.BLACK} text={'Ilan Turu'} />
                {currentCategory.subCategories.map((subc) => (
                    <SubCategoryItem text={subc.subCategoryName} key={subc.subCategoryId} showBorder={true} />
                ))}
            </View>
        ) : null}
    </View>
</NewAdHoc>