如何使用 onPress 将样式应用于某个 ListItem？答案

【问题标题】：How do I apply a style to a certain ListItem using onPress?如何使用 onPress 将样式应用于某个 ListItem？
【发布时间】：2018-09-08 22:03:21
【问题描述】：

我是 React Native 的新手，到目前为止我的大部分进步都归功于我疯狂的复制粘贴技能。

我已经搜索过far 和wide，所以不要告诉我用谷歌搜索。

目标：我希望它只为单个订单项切换删除线 onPress。

据我所知，当用户按下 TouchableOpacity > ListItem 时：

它应该切换strikeStatus，
将添加styles.strike
基于titleStyle 中的this.state.strikeStatus ? styles.strike : false 测试。

具有讽刺意味的是，当它最初加载时，我可以让它为所有 ListItems 工作，但我不能让它切换。请指教。

（它说在 TouchableOpacity 和 ListItem 中都放置一个onPress，但这对我来说毫无意义。如果可行，请提供更详细的说明。）

Expo Snack 是here。

`export default class App extends Component {
      constructor(props) {
        super(props);
        this.state = {
          isLoading: true,
          items: [],
          strikeStatus: false,
        };
      }

      toggleStrike = (item) => {
        this.setState({
          strikeStatus: true
        });
      };

      render() {
        return (
          <Header
            placement="left"
            leftComponent={{ icon: 'menu', color: '#fff' }}
            centerComponent={{
              text: 'Shopping List',
              style: { fontFamily: 'Verdana', fontSize: 18, color: '#fff' },
            }}
            rightComponent={{ icon: 'settings', color: '#fff' }}
          />,
          <List containerStyle={styles.container}>
            <FlatList
              data={this.state.items}
              showsVerticalScrollIndicator={true}
              renderItem={({ item }) => (
                <TouchableOpacity
                  onPress={() => this.toggleStrike(this)}>
                  <ListItem
                    style={styles.item}
                    titleStyle={[
                      styles.item,
                      this.state.strikeStatus ? styles.strike : false
                    ]}
                    title={item.Name}
                    subtitle={item.Updated}
                    badge={{
                      value: item.Buy,
                      textStyle: styles.badge
                    }}
                  />
                </TouchableOpacity>
              )}
            />
          </List>
        );
      }
    }

    const styles = StyleSheet.create({
      strike: {
        textDecorationLine: 'line-through',
        textDecorationStyle: 'solid'
      }
    });`

【问题讨论】：

标签： react-native react-native-flatlist

【解决方案1】：

首先，您将相同的样式应用于所有项目，因为状态变量strikeStatus 设置在您按下的任何项目上，然后它用于所有项目。

要实现您想要的，您可以向项目对象添加一个名为selected 的属性，该属性在false 上初始化。

titleStyle 将是：

titleStyle={[
    styles.item,
    item.selected && styles.strike
]}

然后你像这样调用onPress：

onPress={() => this.toggleStrike(index)}

要使用index 参数，您需要将其添加到renderItem 函数中

在toggleStrike 中，您将传递索引处的项目的selected 值更改为true。

toggleStrike(index) {
    this.setState((prevState) => {
        prevState.items[index].selected = !prevState.items[index].selected;
        return { ...prevState }
    });
}

【讨论】：