在我的本机0.59应用程序中,我想显示联系人用户列表及其名称和角色(如admin
或messenger
)供选择(带有复选框)。段控制选项卡用于显示3个角色供您选择。这是我出现的渲染代码:
import {CheckBox, View } from 'react-native';
import SegmentedControlTab from 'react-native-segmented-control-tab';
render() {
return (
<View style={styles.container}>
{this.state.contacts.map((cb) => {
return (
<View style={{flex:1, flexDirection:'row'}}>
<CheckBox
key={cb.id}
title={cb.contact_for.name}
checked={cb._checked}
onPress={() => this.toggleCheckbox(cb.id)} />
<SegmentedControlTab
values={['messenger', 'eventer', 'admin']}
selectedIndex={this.state.selectedIndex}
onTabPress={this.handleIndexChange}
tabsContainerStyle={styles.tabContainerStyle}
/>
</View>
)
})}
<Button
title='Save'
onPress={this.save}
/>
</View>
)
}
}
此呈现代码的问题在于,该细分受众群不知道与之关联的联系人用户。如何使细分受众群知道与哪个联系人用户关联?
当需要在列表项中显示的元素之间进行交互时,最好的方法通常是创建一个新的React组件来表示您的列表项。
使用这种模式,您将不得不在每行上执行保存操作,可能每行一个按钮...但是您也可以在数据更改后立即保存数据(这在我看来可以提供更好的用户体验)***
这是草稿。您的列表如下:
import {View } from 'react-native';
import {MyContactListItem} from 'myContactListItem.js';
render() {
return (
<View style={styles.container}>
{this.state.contacts.map((cb) => {
return (
<MyContactListItem contact={cb}/>
)
})}
</View>
)
}
}
其他组件MyContactListItem
看起来像波纹管。在handleIndexChange
那么就能知道它是指的哪个联系人,你可以找到contact
的成分props
import {CheckBox, View } from 'react-native';
import SegmentedControlTab from 'react-native-segmented-control-tab';
render() {
return (
<View style={styles.container}>
<View style={{flex:1, flexDirection:'row'}}>
<CheckBox
key={contact.id}
title={contact.contact_for.name}
checked={contact._checked}
onPress={() => this.toggleCheckbox(contact.id)} />
<SegmentedControlTab
values={['messenger', 'eventer', 'admin']}
selectedIndex={this.state.selectedIndex}
onTabPress={this.handleIndexChange}
tabsContainerStyle={styles.tabContainerStyle}/>
</View>
<Button
title='Save'
onPress={this.save}
/>
</View>
)
}
}
如果您绝对需要保留唯一的保存按钮,则另一个选择是管理一个数组,其中包含按下按钮时需要保存的每个控件的状态。您应该将此选项的使用限制为最大尺寸很小的列表(即可能适合您屏幕的列表)
*** edit:实际上可以在父组件中保留唯一的保存按钮,但是要管理起来很麻烦:您需要将状态已更改的信息发送到列表组件,MyContactListItem
以便与id id
,然后管理一系列更改。我不会这样
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句