反應本機元素復選框

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