第一次单击时 FlatList renderItem 未突出显示答案

【问题标题】：FlatList renderItem not being highlighted when clicked the first time第一次单击时 FlatList renderItem 未突出显示
【发布时间】：2020-01-13 17:16:02
【问题描述】：

基本上，我正在尝试设置一个可以选择多个值的平面列表。

我的问题在于元素的样式，第一次单击时它们不会突出显示，但第二次单击时会突出显示。

平面列表代码



renderRow = ({item}) => (
    <RowItem data={item} />
)

data = [
    {
        value: 'element1'
    },
    {
        value: 'element2'
    }
]


render(){
    return (
        <FlatList
            data={this.data}
            renderItem={this.renderRow}
            keyExtractor={(item, index) => item + index}/>
    )
}

行项目代码

export default class RowItem extends React.Component {

    state = {
        isElementActive: false,
    }

    highlightElement = () => {
        this.setState(prevState => ({
            isElementActive: !prevState.isElementActive
        }))
    }

    render() {
        return (
            <TouchableOpacity 
                activeOpacity={0.7}
                onPress={this.highlightElement} 
                style={[styles.container, this.state.isElementActive ? styles.activeContainer : styles.inactiveContainer]}>
            <Text>{this.props.data.value}</Text>
            </TouchableOpacity>
        ) 
    }
}

const styles = Stylesheet.create({
    container: {
       height: 100,
       width: 300,
       backgroundColor: 'red',
    },
    activeContainer: {
        opacity: 0.7,
    },
    inactiveContainer: {
        opacity: 1,
    }
});

单击元素一次时，isElementActive 的值返回 true（当我 console.log 时），但样式“activeContainer”不适用。但是，当我再次单击它时，即使 isElementActive 的值变为 false，也会应用样式。

默认情况下，该值以 false 开始，并且它们没有突出显示（即不透明度为 1），因此我在第一次单击时有点困惑，isElementActive 的值发生了变化，但样式没有申请。

【问题讨论】：

可能重复 Dynamic Opacity not changing when component rerenders in react native 。如果它是 TouchableOpacity 组件上的错误，但在单击该组件之前，不透明度不会在重新渲染时更新

标签： reactjs react-native react-native-flatlist

【解决方案1】：

在setState 之后，我能够使其与setOpacityTo 一起使用。

工作示例：https://snack.expo.io/SJNSKQPIB

import React from 'react';
import {TouchableOpacity, FlatList, StyleSheet, Text} from 'react-native';

type State = {
  active: boolean;
};

type Props = {
  value: string;
};

class RowItem extends React.Component<Props, State> {
  state = {
    active: null,
  };

  ref = null;

  highlightElement = () => {
    this.setState(
      prevState => ({
        active: !prevState.active,
      }),
      () => {
        this.ref.setOpacityTo(this.state.active ? 0.7 : 1);
      },
    );
  };

  render() {
    return (
      <TouchableOpacity
        ref={ref => (this.ref = ref)}
        onPress={this.highlightElement}
        style={[styles.container]}>
        <Text>{this.props.value}</Text>
      </TouchableOpacity>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    height: 100,
    backgroundColor: 'red',
  },
});

export default class App extends React.Component {
  data = [
    {
      value: 'element1',
    },
    {
      value: 'element2',
    },
  ];

  render() {
    return (
      <FlatList
        keyExtractor={(_, index) => index.toString()}
        data={this.data}
        renderItem={({item}) => <RowItem value={item.value} />}
      />
    );
  }
}

【讨论】：