Как переопределить родительские стили в React Native - PullRequest
Новая
       15

Как переопределить родительские стили в React Native

0 голосов
/ 16 октября 2019

У меня есть класс контейнера, и я добавляю в него компоненты, сделанные в зависимости от состояния контейнера. В компоненте ниже я определил ширину как 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.

Любая помощь будет оценена, спасибо.

1 Ответ

1 голос
/ 16 октября 2019

Переместить отступ к краю 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>
...