如何在onPress上添加属性或更改按钮的样式onReact native-native base

Question

我有一个列表，其中有些项目在单击时会添加到状态，我使用本机库，我如何在按下列表项时更改列表项的样式，或者将“ 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>
);

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

handleItemSelect将项目ID添加到一个状态，以便即时消息管理当前正在选择的项目，如何使用此信息，或通过其他任何方式突出显示所选择的项目？

Answer 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设置颜色，然后在单击事件时可以更改颜色。

希望这会有所帮助！

如何在onPress上添加属性或更改按钮的样式onReact native-native base

问题描述投票：0回答：1

1个回答

最新问题

如何在onPress上添加属性或更改按钮的样式onReact native-native base

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1