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的{{1}}和paddingLeft样式的影响。

感谢您的任何帮助。

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>

如何在React Native中覆盖父样式

1 个答案: