reactjs - 第一次单击时 FlatList renderItem 未突出显示

问题描述

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

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

平面列表代码



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 的值发生了变化，但样式不适用。

标签： reactjsreact-nativereact-native-flatlist

我能够setOpacityTo在setState.

工作示例：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} />}
      />
    );
  }
}

reactjs - 第一次单击时 FlatList renderItem 未突出显示

问题描述

解决方案

推荐阅读