react-native - 列表项的背景颜色不起作用？

Question

我第一次制作一个列表项，如果我使用此代码，我发现没有任何变化：

**编辑！

     import React from "react";
import { StyleSheet, View } from "react-native";
import { ListItem } from "react-native-elements";
import MaterialIcons from "react-native-vector-icons/MaterialIcons";
import MaterialCommunityIcons from "react-native-vector-icons/MaterialCommunityIcons";

export default class ChangePassword extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  accountIcon = () => (
    <MaterialIcons name="account-box" size={35} type="MaterialIcons" />
  );
  changePasswordIcon = () => (
    <MaterialCommunityIcons
      name="textbox-password"
      size={35}
      type="MaterialCommunityIcons"
    />
  );

  render() {
    return (
      <View>
        <ListItem title="Account" leftIcon={this.accountIcon} bottomDivider />
        <View style={{ backgroundColor: "#007bff" }}>
          <ListItem
            title="Change password"
            leftIcon={this.changePasswordIcon}
            bottomDivider
          />
        </View>
      </View>
    );
  }
}

有人可以向我解释为什么会这样以及我该如何解决这个问题。

欣赏它，谢谢你的时间

Answer 1

您正在使用react-native-elements. 因此，您必须使用该模块的样式。

您可以使用containerStyle={{backgroundColor:""}}

如果你只是想改变标题的颜色，titleStyle={{backgroundColor:""}}

例子

          <ListItem
            title="Change password"
            leftIcon={this.changePasswordIcon}
            bottomDivider
            containerStyle={{backgroundColor:"blue"}}
            titleStyle={{backgroundColor:"red"}}
          />

Answer 2

import React from 'react'
import { StyleSheet, Text, View } from 'react-native'
import { Avatar, ListItem } from 'react-native-elements'


const CustomList = () => {
    return (
        <View >
            <ListItem bottomDivider containerStyle={{backgroundColor: '#3d3c3a'}} >
                <Avatar
                    rounded
                    source={{uri: 'https://i.picsum.photos/id/100/2500/1656.jpg?hmac=gWyN-7ZB32rkAjMhKXQgdHOIBRHyTSgzuOK6U0vXb1w'}}    
                />
                <ListItem.Content>
                    <ListItem.Title style={{fontWeight: '800'}} >Sr.Manager</ListItem.Title>
                    <ListItem.Subtitle ellipsizeMode='tail' numberOfLines={1} >Hello, Welcome to</ListItem.Subtitle>
                </ListItem.Content>
            </ListItem>
        </View>
    )
}

export default CustomList;

const styles = StyleSheet.create({})