反应本机如何使用样式道具

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=

有康斯特风格：

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

你有很多可能性：

1. 使用Stylesheet.flatten(Array of styles)

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

1. --返回样式

的函数

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

对我来说最好的方法是使用styled-components

import styled from 'styled-components';

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

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

Answer 2

在您从render返回之前的SettingsView组件中，编写const themedStyles = styles(this.props);。然后您可以使用style={themedStyles.backgroundColorTheme}。