我想将这个 Flatlist React 本机代码转换为 class 文件

Question

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

const DATA = [
  {
    id: '1',
    title: 'First Item',
  },
  {
    id: '2',
    title: 'Second Item',
  },
  {
    id: '3',
    title: 'Third Item',
  },
  {
    id: '4',
    title: 'Fourth Item',
  },
  {
    id: '5',
    title: 'Fifth Item',
  },
  {
    id: '6',
    title: 'Sixth Item',
  },
  {
    id: '7',
    title: 'Seventh Item',
  },
];


function Item({id, title, selected, onSelect}) {
  return (
    <TouchableOpacity
      onPress={() => onSelect(id)}
     style={[styles.item, {backgroundColor: selected ? '#1EF09D' : 'white'}]}
     >
      <Text style={styles.title}>{title}</Text>
    </TouchableOpacity>
  );
}

export default function App() {
  const [selected, setSelected] = React.useState(new Map());


  const onSelect = React.useCallback(
    id => {

      const newSelected = new Map();
     // newSelected.set(id, !selected.get(id));
      newSelected.set(id, !selected.get(id));
      setSelected(newSelected);

    },
   // [selected],
  );

  return (
    <SafeAreaView style={styles.container}>
      <FlatList
        horizontal
        initialScrollIndex={DATA.length - 1}
        data={DATA}
        renderItem={({item}) => (
          <Item
            id={item.id}
            title={item.title}
            selected={!!selected.get(item.id)} **im facing the issue at this point after converting this into a class file**
            onSelect={onSelect}
          />
        )}
        keyExtractor={item => item.id}
        extraData={selected}
      />
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  item: {
    backgroundColor: 'red',
    padding: 20,
    marginVertical: 8,
    marginHorizontal: 10,
    width: '50%',
    height: '20%',
    flex: 2,
    borderWidth: 2,
    borderRadius: 15,

    borderColor: '#39FF33',
  },
  title: {
    fontSize: 14,
  },
});

如何在 class 文件中转换此代码。此代码处于运行ning 状态，您可以在 snack.expo.io 或您自己的电脑上运行它。当我尝试转换此代码时，我遇到了 minirect 问题以及更多问题。

我在尝试转换代码时也遇到了 hooks 错误。

Answer 1

这是转换为 class 的原生应用。

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

const DATA = [
  {
    id: '1',
    title: 'First Item',
  },
  {
    id: '2',
    title: 'Second Item',
  },
  {
    id: '3',
    title: 'Third Item',
  },
  {
    id: '4',
    title: 'Fourth Item',
  },
  {
    id: '5',
    title: 'Fifth Item',
  },
  {
    id: '6',
    title: 'Sixth Item',
  },
  {
    id: '7',
    title: 'Seventh Item',
  },
];

class Item extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    const {id, title, selected, onSelect} = this.props;
    return (
      <TouchableOpacity
        onPress={() => onSelect(id)}
      style={[styles.item, {backgroundColor: selected ? '#1EF09D' : 'white'}]}
      >
        <Text style={styles.title}>{title}</Text>
      </TouchableOpacity>
    );
  }
}

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      selected: new Map(),
    };
  }

  onSelect = id => {
    const { selected } = this.state;
    var newSelected = new Map();
    newSelected.set(id, !selected.get(id));
    this.setState({selected: newSelected});
  };

  render() {
    const { selected } = this.state;
    return (
      <SafeAreaView style={styles.container}>
        <FlatList
          horizontal
          initialScrollIndex={DATA.length - 1}
          data={DATA}
          renderItem={({item}) => (
            <Item
              id={item.id}
              title={item.title}
              selected={!!selected.get(item.id)}
              onSelect={this.onSelect}
            />
          )}
          keyExtractor={item => item.id}
          extraData={selected}
        />
      </SafeAreaView>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  item: {
    backgroundColor: 'red',
    padding: 20,
    marginVertical: 8,
    marginHorizontal: 10,
    width: '50%',
    height: '20%',
    flex: 2,
    borderWidth: 2,
    borderRadius: 15,

    borderColor: '#39FF33',
  },
  title: {
    fontSize: 14,
  },
});

export default App;

expo snack link

如果你想初始化所选地图的状态，试试这样。

constructor(props) {
    super(props);
    this.state = {
      selected: new Map([[DATA[DATA.length - 1].id, true]]), // last item selected
    };
  }

我想将这个 Flatlist React 本机代码转换为 class 文件

I want to convert this Flatlist react native code into a class file

javascript

reactjs

react-native

react-redux

react-native-android