在本机反应中选择时如何更改列表项背景颜色？答案

【问题标题】：How to change list item background color when selected in react native?在本机反应中选择时如何更改列表项背景颜色？
【发布时间】：2019-04-22 18:20:48
【问题描述】：

我正在使用native-base ui 套件。我正在尝试更改边栏中所选项目的背景颜色。但是怎么做呢？我已对此 theme/variablesplatform.js 文件进行了更改。

listBg: "#008080",
  listBorderColor: "#c9c9c9",
  listDividerBg: "#f4f4f4",
  listBtnUnderlayColor: "#008080",
  listItemPadding: platform === "ios" ? 10 : 12,
  listNoteColor: "#808080",
  listNoteSize: 13,

但看不到任何变化。请帮我找到任何解决方案？这就是侧边栏中的ListItem 的样子

  <List
            dataArray={datas}
            renderRow={data =>
              <ListItem
                button
                noBorder
                onPress={() => this.props.navigation.navigate(data.route)}
              >
                <Left>
                <Image
                  source={data.icon }
                  style={{width:30,height:30}}
                />
                  <Text style={styles.text}>
                    {data.name}
                  </Text>
                </Left>
                {data.types &&
                  <Right style={{ flex: 1 }}>
                    <Badge
                      style={{
                        borderRadius: 3,
                        height: 25,
                        width: 72,
                        backgroundColor: data.bg
                      }}
                    >
                      <Text
                        style={styles.badgeText}
                      >{`${data.types} Types`}</Text>
                    </Badge>
                  </Right>}
              </ListItem>}
          />

请帮帮我。

【问题讨论】：

我正在阅读文档，我认为您需要使用 native-base 的 StyleProvider 组件并在那里提供自定义样式。 docs.nativebase.io/Customize.html

标签： react-native jsx listitem native-base

【解决方案1】：

您可以在状态更改时更改背景颜色，由（例如 onPress）触发。但首先您需要在状态中包含颜色，然后在按下列表时更改状态颜色。

//add color to your data
const lists = [{
    id: 1,
    nama: 'asep',
    cat: 'BAN',
    color: '#fff'
  },
  {
    id: 2,
    nama: 'deni',
    cat: 'BAN',
    color: '#fff'
  },
  {
    id: 3,
    nama: 'dini',
    cat: 'BAN',
    color: '#fff'
  },
];

// set your state
const [state, setState] = useState(lists);

// create handle change and pass id of item to it
const handleChangeColor = id => {
  let newState = state.map(item => {
    if (item.id === id) {
      // console.log(item.id + ' ' + id);
      item.color = '#eee';
      console.log(item)
    }
    return item;
  });
  setState(newState);
};

// render your list
{
  state.map(item => {
    return ( <
      List style = {
        [styles.listStyle, {
          backgroundColor: item.color
        }]
      }
      key = {
        item.id
      } >
      <
      ListItem thumbnail onPress = {
        () => {
          handleChangeColor(item.id);
        }
      } >
      <
      Body >
      <
      Text > {
        item.nama
      } < /Text> <
      Text note numberOfLines = {
        1
      } > {
        item.id
      } <
      /Text> <
      /Body> <
      Right >
      <
      Text > {
        item.cat
      } < /Text> <
      /Right> <
      /ListItem> <
      /List>
    );
  })
}

【讨论】：