React Native EStyleSheet, как применить несколько стилей

Я новичок в React Native EStyleSheet lib. Я считаю, что это действительно круто, но я не могу понять одной вещи: как применить несколько стилей к одному элементу, как я делал это с обычными стилями с style = {{...styles.style1, ...styles.style2}}?

render() {
    return <View style = {estyles.container}>
        <View style = {{...estyles.container, ...estyles.containerInner}}>
            <Text>Hello, World!</View>
        </View>
    <View>

}

const estyles = EStyleSheet.create({
    container: {
        padding: '2%',
        borderStyle: 'solid',
        borderRadius: 1,
        borderWidth: 1,
        borderColor: 'black'
    },
    containerInner: {
        padding: '5%'
    }
});

Попробуйте style = {[estyles.container, estyles.containerInner]}

Pritish Vaidya 18.11.2018 22:41
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
0
1
1 488
2

Ответы 2

вы можете использовать в стилевом массиве стилей, например:

render() {
    return <View style = {estyles.container}>
        <View style = {[estyles.container,estyles.containerInner]}>
            <Text>Hello, World!</View>
        </View>
    <View>

}

const estyles = EStyleSheet.create({
    container: {
        padding: '2%',
        borderStyle: 'solid',
        borderRadius: 1,
        borderWidth: 1,
        borderColor: 'black'
    },
    containerInner: {
        padding: '5%'
    }
});

this => [estyles.container, estyles.containerInner] можно использовать

Вы можете использовать массив стилей, чтобы применить несколько стилей к одному представлению

пример

<View style = {[styles.container, styles.view,...]}>
</View>

Другие вопросы по теме