反应本机列表视图
Posted
技术标签:
【中文标题】反应本机列表视图【英文标题】：React Native List View 【发布时间】：2017-08-18 01:35:00 【问题描述】：我正在尝试在 react native 中创建一个 Listview，每一行都有一个复选框和一个正文。为此，我使用的是 nativebase 包。 http://nativebase.io/docs/v2.0.0/components#checkbox
我有一些问题，当我单击复选框时，复选框不会将状态更改为 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;
【问题讨论】：
我也有同样的问题，有什么解决办法吗？ 【参考方案1】：除非给定新数据，否则我不相信列表会重新呈现，请尝试这样做：
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>
);
【讨论】：
当我点击复选框时，我收到错误“列表未定义”：/@Matt Aft 哦语法错误，改成：this.setState( pressed: false, value, list: ["test4", "test5", "test6"]);【参考方案2】：
我遇到了类似的问题，在我的情况下，我需要保存所选行的 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);
【讨论】：
以上是关于反应本机列表视图的主要内容，如果未能解决你的问题，请参考以下文章