Question

我正在使用native-base用户界面套件。我正在尝试更改侧边栏中所选项目的背景颜色。但是该怎么做呢？我已经对此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>}
          />

请帮助我。

Answer 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>
    );
  })
}

在react native中选择时如何更改列表项的背景颜色？

1 个答案: