React Native, как использовать стили реквизита

Question

Мой компонент SettingsView есть:

<List style={styles(this.props).backgroundColorTheme}>
            <ListItem style={custom.settingsListItem} onPress={() => this.props.navigation.navigate('AppIntro')}>
              <MaterialIcons name="import-contacts" size={25} color={'#22364F'}/>
              <Text style={custom.settingsText}>
                  Покажете въвеждащата страница
              </Text>
              <Entypo name="chevron-right" size={25} style={custom.settingsDetailsArrow}/>
            </ListItem>
</List>

Как в атрибуте стиля я могу использовать style = {styles.backgroundColorTheme} вместо style = {styles (this.props) .backgroundColorTheme}

Есть постоянные стили:

import {StyleSheet} from "react-native";

export const styles = (props) => StyleSheet.create({
    colorTheme: {
        color: props.theme.backgroundColor,
        marginTop: 60,
        marginBottom: 20,
        marginLeft: 20,
        fontWeight: '200',
        fontSize: 24,
    },
    backgroundColorTheme: {
        backgroundColor: props.theme.backgroundColor,
    }
});

Answer 1

В вашем SettingsView компоненте непосредственно перед возвратом из рендера напишите const themedStyles = styles(this.props);. Тогда вы можете использовать style={themedStyles.backgroundColorTheme}.

Answer 2

У вас есть много возможностей:

1) Использование Stylesheet.flatten (Массив стилей)

<List 
    style={StyleSheet.flatten([
          styles.backgroundColorTheme, 
          {backgroundColor: 'yourcolor'
    }]}
>
   ...
</List>

2) Функция, которая возвращает ваш стиль

const getListStyle = color => ({
   backgroundColor: color,
});
...
<List 
    style={getListStyle(color)}
>
   ...
</List>

3) Лучшее для меня - использовать styled-components

import styled from 'styled-components';

const ThemeColoredList = styled(List)`
   background-color: ${props => props.backgroundColor || 'yourdefaultcolorhere'}
`;

const Page = () => (
   <ThemeColoredList backgroundColor='yourcolorhere'>
      ...
   </ThemeColoredList>
);