Как добавить атрибут или изменить стиль кнопки наPress реагировать на родную - родную базу - PullRequest
Новая
       42

Как добавить атрибут или изменить стиль кнопки наPress реагировать на родную - родную базу

0 голосов
/ 04 апреля 2020

У меня есть список с некоторыми элементами, которые добавляются в состояние при нажатии, я использую native-base, как я могу изменить стиль элемента списка при нажатии на него, или добавить атрибут «selected» в элемент списка ?

код 

const [data, setData] = useState([]);

  const _renderItem = ({ item, index }) => {
    return (
      <ListItem
        button={true}
        onPress={() => handleItemSelect(item)}
      >
        <Left>
          <Text>{item.Name}</Text>
        </Left>
        <Right>
          <Icon name="add" style={{ paddingHorizontal: 5 }} />
        </Right>
      </ListItem>
    );
  };

return(
 <Container>
      <List>
        <FlatList
          data={data}
          renderItem={_renderItem}
        />
      </List>
    </Container>
);

Мне интересно, как я собираюсь добавить стиль и различать guish между различными элементами списка, которые у меня есть, если это невозможно? как я могу использовать native-base «selected» и добавить его к списку?

handleItemSelect добавляет идентификатор элемента в состояние, поэтому я в настоящее время определяю, какие элементы выбраны, как я могу использовать эту информацию или любую другую Другой способ выделить выделенные элементы?

Редактировать: я понял, как это легко сделать, поскольку у меня есть идентификаторы выбранных элементов 

 <ListItem
        selected={selectedItems.some((prevItem) => prevItem._id === item._id)}
        style={sameasabove ? style1 : style2}
        button={true}
        onPress={() => handleItemSelect(item)}
      >
      </ListItem>

1 Ответ

0 голосов
/ 05 апреля 2020

Вы можете сделать что-то вроде этого:

Пример 

export default class App extends React.Component {
  constructor() {
    super();
    this.state = {
      data: [
        { name: "Interstellar" },
        { name: "Dark Knight" },
        { name: "Pop" },
        { name: "Pulp Fiction" },
        { name: "Burning Train" },
      ],
      setData: []
    };

    for (var i = 0; i < this.state.data.length; i++) {
      this.state.setData[i] = "red";
    }

    this.setState({
      setData: this.state.setData
    })
  }

  handleItemSelect(item, index) {
    this.state.setData[index] = "green";
    this.setState({
      setData: this.state.setData
    })
  }

  renderItem = ({ item, index }) => {
    return (
      <ListItem button={true}
        onPress={() => this.handleItemSelect(item, index)} style={{ marginLeft: 0 }}>
        <Body>
          <Text style={{ color: this.state.setData[index] }}>{item.name}</Text>
        </Body>
      </ListItem>
    );
  };
  render() {
    return (
      <FlatList style={{ marginTop: 30 }}
        data={this.state.data}
        renderItem={this.renderItem}
      />
    );
  }
}

enter image description here

Вы можете изначально установите цвет для вашего ListItem, а затем вы можете изменить цвет для события щелчка.

Надеюсь, это поможет!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...