1.有个需求;从后台传入很多的物品;然后你需要一条条的展示,然后用户只可以选择其中的一个;然后在选中的一个在后边出现一个小勾勾,表示用户已经选中;后台给的数据是数组包着数组,
解决方案: 首先对最外面的一个数组进行循环,给每个绑定一个checked,属性值为false;然后根据判断里面和外面的id相同,就把checked赋值为true;就可以了!
// 初始值
for(var i = 0; i < result.data.length; i++){
var goods = [];
for(good of JSON.parse(result.data[i].goods)){
good.checked = false; // 初始为false就不显示
goods.push(good);
}
result.data[i].goods = goods;
}
this.setState({ remark : result.data });
this.state.remark.map((el,index)=>{ // 这是最外面的数组
ListItem.push(
<View style={styles.title} key={index}>
<View style={{ marginBottom : 10, paddingLeft : 10, paddingRight : 10 }}>
<Text style={{color:'#a1a1a1'}}>{el.remark}</Text>
</View>
{ // 这是里面的数组
el.goods.map((data, goodsIndex) => {
return <View style={styles.concrete} key={goodsIndex}>
<Text>{data.name}</Text>
<TouchableHighlight underlayColor={'transparent'} onPress={()=> this.changeCheckbox(data.id)}>
<View style={{justifyContent:'space-between',alignItems:'center',flexDirection:'row',}}>
<Text style={{ width:SCREEN_WIDTH*0.89, marginLeft:SCREEN_WIDTH*0.02,color:'#090909',}}>{ data.itemName }</Text>
{el.goods[goodsIndex].checked? // 判断是否为true,为true为显示小勾勾
<Image source={require('./../../../images/icon/ic_quedingxuanze.png')} style={{}}></Image>
:null}
</View>
</TouchableHighlight>
</View>
})
}
</View>
)
});
var group = [];
for(var remark of this.state.remark){ // 这是外面的数组
var goods = [];
for(var good of remark.goods){ // 这是里面的数组
good.checked = false;
if(id == good.id){
this.setState({
goodsId:good.id
});
good.checked = true;
}
goods.push(good);
}
remark.goods = goods;
group.push(remark);
}
2.
numberoflines={1} // 未显示的文本会以...显示; <ScrollView> //滚动标签一般外面要包个View;
3.在rn中文本输入时候,键盘要挡住输入框;解决方案;
<KeyboardAwareScrollView keyboardShouldPersistTaps={'always'}></KeyboardAwareScrollView>
这个组件要包在textInput之外的
keyboardShouldPersistTaps bool 默认值为false。
当此属性为false的时候,在软键盘激活之后,点击焦点文本输入框以外的地方,键盘就会隐藏。
如果为true,滚动视图不会响应点击操作,并且键盘不会自动消失。
4.