Question

基本上，我正在尝试设置一个Flatlist，可以在其中选择多个值。

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

FlatList代码



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

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


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

RowItem代码

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的值会更改，但是样式不会更改申请。

Answer 1

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

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

1 个答案: