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

Question

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

我搜索过far and ，别叫我Google

目标：我希望它只为单个订单项切换删除线 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'
      }
    });`

Answer 1

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

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

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

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

How do I apply a style to a certain ListItem using onPress?

react-native

react-native-flatlist