反应本机元素复选框

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将有一个要渲染的数组，该数组具有一个类似'name'和'userid'的字段。

我想将选定的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);
                    }}
                  />

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

在右侧添加一个复选框（带有React Native Elements CheckBox组件道具的对象）

希望这会有所帮助。

反应本机元素复选框

问题描述

1 个解决方案

解决方案1
1 2019-04-07 23:16:41

反应本机元素复选框

问题描述

1 个解决方案

解决方案1 1 2019-04-07 23:16:41

解决方案1
1 2019-04-07 23:16:41