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

有ListItem的checkBox属性，您可以将其与CheckBox道具一起使用。我正在一个不同的项目上，到目前为止很方便。

您可以如下使用CheckBox的道具，

  <ListItem
                    title={item.data.toString()}
                    subtitle={item.type}
                    checkBox={{ checked: this.state.checked }}
                    onPress={() => {
                      this.props.filters(item.id);
                    }}
                  />

此外，您还可以查看文档中的其他道具和详细信息。

add a checkbox on the right side (object with the props of the React Native Elements CheckBox component)

希望这会有所帮助。

反应本机元素复选框

1 个答案: