React 네이티브 목록보기

반응식 네이티브로 Listview를 만들려고하는데 각 행마다 확인란과 본문이 있습니다. 이렇게하려면 nativebase 패키지를 사용하고 있습니다. http://nativebase.io/docs/v2.0.0/components#checkbox React 네이티브 목록보기

확인란을 클릭하면 상태가 false로 변경되지 않습니다. 몇 가지 문제가 있습니다. 체크 박스를 클릭하면 본문 텍스트의 값을 어떻게 얻을 수 있습니까?

import React, { Component } from 'react'; 
import { Container, Content, List, Body, ListItem, Text, CheckBox } from 'native-base'; 

class ListExample extends Component { 
    state = { 
    pressed: true, 
    value: "" 
    }; 

    onCheckBoxPress() { 
    console.log(this); 
    this.setState({ pressed: false}); 
    this.setState({ value: BODYVALUE}); 
    } 

    render() { 
    var items = [ "test1", "test2", "test3", "test4", "test5", "test6" ]; 
    return (
     <Container> 
     <Content> 
      <List dataArray={items} renderRow={(data) => 
       <ListItem> 
       <CheckBox onPress={this.onCheckBoxPress.bind(this)} checked={this.state.pressed} /> 
       <Body> 
        <Text>{data}</Text> 
       </Body> 
       </ListItem> 
      } /> 
     </Content> 
    </Container> 
    ); 
    } 
} 

export default ListExample;

출처

2017-03-24 lolix

나는 동일한 문제, 모든 해결책 lolix가 있는가? – neelima

나는 목록이 새로운 데이터를 제공하지 않는 이상,이 일을하려고 다시 렌더링 생각 해달라고 :

나는 비슷한 문제가 있었다

class ListExample extends Component { 
    state = { 
    pressed: true, 
    value: "" 
    list: [ "test1", "test2", "test3" ] 
    }; 

    onCheckBoxPress = (value) => { 
    console.log(this); 
    this.setState({ pressed: false, value, list: ["test4", "test5", "test6"]}); 
    } 

    render() { 
    return (
     <Container> 
     <Content> 
      <List dataArray={this.state.list} renderRow={(data) => 
       <ListItem> 
       <CheckBox onPress={() => this.onCheckBoxPress(data)} checked={this.state.pressed} /> 
       <Body> 
        <Text>{data}</Text> 
       </Body> 
       </ListItem> 
      } /> 
     </Content> 
    </Container> 
    ); 
    } 
}

출처

2017-03-25 00:06:22

체크 박스를 클릭하면 "목록이 정의되지 않았습니다"오류가 발생합니다 :/@Matt Aft – lolix

오, 구문이 잘못되었습니다 :'this.setState ({pressed : false, value, list : [ "test4" , "test5", "test6"]}); ' –

미안하지만 작동하지 않습니다 @Matt Aft – lolix

, 내 경우에는 내가의 ID를 저장하는 데 필요한 선택한 행이 있으면 적용되는 솔루션입니다.

import React, { Component } from 'react'; 
import { 
    StyleSheet, 
    View, 
    ListView 
} from 'react-native'; 
import { typography } from 'react-native-material-design-styles'; 
import { Container, Content, Item, List, CheckBox, Body, ListItem, Text } from 'native-base'; 
import ItemLot from './item.js'; 

export default class LotsListDevolutionClient extends Component { 
    state = { 
    lots: [ 
     { 
     id: 1, 
     serie: 'sorteo', 
     almacen: 'principal', 
     inicio: 1, 
     fin: 50 
     }, 
     { 
     id: 2, 
     serie: 'sorteo', 
     almacen: 'principal', 
     inicio: 51, 
     fin: 100 
     } 
    ], 
    selectedLots: [], 
    token: '' 
    }; 

    onCheckBoxPress(id) { 
    let tmp = this.state.selectedLots; 

    if (tmp.includes(id)) { 
     tmp.splice(tmp.indexOf(id), 1); 
    } else { 
     tmp.push(id); 
    } 

    this.setState({ 
     selectedLots: tmp 
    }); 
    console.warn('selected: ', this.state.selectedLots) 
    } 

    _renderItem(item){ 
    return (
     <View style={styles.row}> 
     <CheckBox checked={item.check} onPress={() => this.onCheck(item)} /> 
     <Item lot={item}/> 
     </View> 
    )  
    } 

    render() { 
    const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}) 
    return (
     <Container> 
     <Content style={styles.content}> 
      <Text style={[typographyStyle.paperFontTitle, {alignSelf: 'center'}]}>Seleccione los lotes</Text> 
      <Item> 
      <ListView 
       enableEmptySections={true} 
       dataSource={ds.cloneWithRows(this.state.lots)} 
       renderRow={(item) => 
       <ListItem style={styles.listItem}> 
        <CheckBox 
        checked={this.state.selectedLots.includes(item.id) ? true : false} 
        onPress={()=>this.onCheckBoxPress(item.id)} 
        /> 
        <ItemLot lot={item}/> 
       </ListItem> 
       } 
      /> 
      </Item> 
     </Content> 
     </Container> 
    ); 
    } 
} 

const styles = StyleSheet.create({ 
    container: { 
    flex: 1, 
    backgroundColor: 'white' 
    }, 
    row:{ 
    flexDirection: 'row', 
    justifyContent: 'flex-start' 
    }, 
    listItem: { 
    backgroundColor: '#DFDFDF', 
    elevation: 5, 
    margin: 4 
    }, 
    content: { 
    flexDirection: 'column' 
    } 
}); 

const typographyStyle = StyleSheet.create(typography);

출처

2017-09-13 02:55:54

React 네이티브 목록보기

답변

관련 문제