Question

我在平面列表的列表项中使用React Native Elements CheckBox。

import React, { Component } from "react";
import { View, Text, StyleSheet, FlatList } from "react-native";
import axios from "axios";
import {
  Button,
  Container,
  Content,
  Header,
  Body,
  Left,
  Right,
  Title
} from "native-base";
import Icon from "react-native-vector-icons/Ionicons";
import { List, ListItem, SearchBar, CheckBox } from "react-native-elements";

// const itemId = this.props.navigation.getParam('itemId', 'NO-ID');
// const otherParam = this.props.navigation.getParam('otherParam', 'some default value');

class TeacherSubjectSingle extends Component {
  static navigationOptions = {
    header: null
  };
  // static navigationOptions = {
  //     headerStyle: {
  //         backgroundColor: '#8E44AD',
  //       },
  //     headerTintColor: '#fff',

  // }

  state = {
    class_id: null,
    userid: null,
    usertype: null,
    student_list: [],
    faq: [],
    checked: []
  };

  componentWillMount = async () => {
    const {
      class_id,
      student_list,
      userid,
      usertype
    } = this.props.navigation.state.params;
    await this.setState({
      class_id: class_id,
      student_list: student_list,
      userid: userid,
      usertype: usertype
    });
    console.log(this.state.class_id);
    var result = student_list.filter(function(obj) {
      return obj.class_section_name == class_id;
    });
    this.setState({
      student_list: result[0]
    });
  };

  renderSeparator = () => {
    return (
      <View
        style={{
          height: 1,
          width: "100%",
          backgroundColor: "#CED0CE"
        }}
      />
    );
  };

  checkItem = item => {
    const { checked } = this.state;

    if (!checked.includes(item)) {
      this.setState({ checked: [...checked, item] });
    } else {
      this.setState({ checked: checked.filter(a => a !== item) });
    }
  };

  render() {
    return (
      <Container>
        <Header style={{ backgroundColor: "#8E44AD" }}>
          <Left>
            <Button
              transparent
              onPress={() => this.props.navigation.navigate("ClassTeacher")}
            >
              <Icon name="ios-arrow-dropleft" size={24} color="white" />
            </Button>
          </Left>
          <Body>
            <Title style={{ color: "white" }}>{this.state.class_id}</Title>
          </Body>
          <Right />
        </Header>
        <View style={{ flex: 1, backgroundColor: "#fff" }}>
          <List containerStyle={{ borderTopWidth: 0, borderBottomWidth: 0 }}>
            <FlatList
              data={this.state.student_list.students}
              renderItem={({ item }) => (
                <ListItem
                  // roundAvatar
                  title={
                    <CheckBox
                      title={item.name}
                      onPress={() => this.checkItem(item.userid)}
                      checked={this.state.checked.includes(item.userid)}
                    />
                  }
                  // subtitle={item.email}
                  // avatar={{ uri: item.picture.thumbnail }}
                  containerStyle={{ borderBottomWidth: 0 }}
                  onPress={() =>
                    this.props.navigation.navigate("IndividualChat", {
                      rc_id: item.userid,
                      userid: this.state.userid,
                      usertype: this.state.usertype,
                      subject_name: this.state.student_list.subject_name
                    })
                  }
                />
              )}
              keyExtractor={item => item.userid}
              ItemSeparatorComponent={this.renderSeparator}
            />
          </List>
        </View>
      </Container>
    );
  }
}
export default TeacherSubjectSingle;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center"
  }
});

上面是我的代码，我已经尝试了所有可能，并检查了GitHub页面的内容，但是如果我按下复选框，则不会检查我的项目。

我的renderItem将具有一个要渲染的数组，该数组具有一个类似“名称”和“用户ID”的字段。

这是代码示例，我从那里复制了相同的代码，并且在这里正常工作

我想将选定的id保存到数组中，以便将其作为道具传递给下一个屏幕。

Answer 1

由于FlatList是PureComponent，因此除非data更改，否则它将不会重新渲染项目。如果您希望FlatList数组更改时重新渲染checked，则需要将其传递给例如extraData。

<FlatList
  data={this.state.student_list.students}
  extraData={this.state.checked}
  renderItem={({ item }) => {
    // ...
  }}
  keyExtractor={item => item.userid}
  ItemSeparatorComponent={this.renderSeparator}
/>

单击

1 个答案: