如何添加属性或更改按钮的样式 onPress react native - native base答案

【问题标题】：How to add an attribute or change style of a button onPress react native - native base如何添加属性或更改按钮的样式 onPress react native - native base
【发布时间】：2020-04-04 19:33:06
【问题描述】：

我有一个列表，其中包含一些在单击时添加到状态的项目，我使用的是原生基础，当我按下它时如何更改列表项的样式，或者将“选定”属性添加到列表项?

代码

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

我想知道如何添加样式并区分我拥有的不同列表项，如果这不可能，我如何使用本机基础“选定”并将其附加到列表项？

handleItemSelect 将项目 ID 添加到状态，因此我当前管理哪些项目被选中，我如何使用此信息或任何其他方式突出显示所选项目？

编辑：我想出了如何轻松做到这一点，因为我有选定的项目 ID

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

【问题讨论】：

标签： javascript list react-native expo native-base

【解决方案1】：

你可以这样做：

示例

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

您最初可以为您的 ListItem 设置颜色，然后您可以更改点击事件的颜色。

希望这会有所帮助！

【讨论】：