React native 反应本机元素句柄列表项单击

我使用

React Native Elements

库在

平面列表中创建列表项。我显示一个用户列表，我需要在单击后处理样式

我的代码是：

<View style={{flex: 1}}>
  <FlatList
    data={this.state.data}
    renderItem={({item}) => (
      <ListItem
        leftAvatar={{source: {uri: item.avatar}}}
        title={`${item.firstName} ${item.lastName}`}
        // subtitle={item.email}
        chevron
        onPress={this.onItemClickHandler}
      />
    )}
    keyExtractor={item => item.email}
    ItemSeparatorComponent={this.renderSeparator}
    ListHeaderComponent={this.renderHeader}
  />
  <Button
    title='Suivant'
    onPress={() => navigation.navigate('LastStepToShare')}
    containerStyle={{marginBottom: 15}}
  />
</View>


(
)}
keyExtractor={item=>item.email}
ItemSeparatorComponent={this.renderSeparator}
ListHeaderComponent={this.renderHeader}
/>
navigation.navigate（'LastStepToShare'）}
containerStyle={{marginBottom:15}}
/>

如何编辑单击的
ListItem
项目的背景
 您可以这样做：

<FlatList
  data={this.state.data}
  renderItem={({item, index}) => {
    const {selectedIndex} = this.state;
    const itemStyle = selectedIndex === index ? styles.selected : styles.notSelected;
    return (
      <ListItem
        leftAvatar={{source: {uri: item.avatar}}}
        title={`${item.firstName} ${item.lastName}`}
        style={itemStyle}
        // subtitle={item.email}
        chevron
        onPress={() => this.onItemClickHandler(index)}
      />
    )
  }}
  keyExtractor={item => item.email}
  ItemSeparatorComponent={this.renderSeparator}
  ListHeaderComponent={this.renderHeader}
/>

{
const{selectedIndex}=this.state；
const itemStyle=selectedIndex==index？styles.selected:styles.notSelected；
返回(
this.mclickhandler（index）}
/>
)
}}
keyExtractor={item=>item.email}
ItemSeparatorComponent={this.renderSeparator}
ListHeaderComponent={this.renderHeader}
/>

在
onItemClickHandler
函数中，使用
this.setState
将
selectedIndex
值设置为状态

基本上，通过
onPress
事件获取所选索引，并将其与
renderItem
函数中的当前索引进行比较。在此基础上，您可以设置一个样式变量。
您可以轻松存储活动项的状态，并在
onItemClickHandler
函数上设置状态，现在您可以根据项的状态更改样式（是否活动）

下面是一个示例代码段，这可能会帮助您：

<FlatList
    data={this.getAllTask()}
    renderItem={({ item, index }) =>
    <TouchableHighlight
        onPress={() => {this.props.navigation.navigate('OtherPage', {text: item.task_name, index: index})}}>
            <View style={styles.customRowContainer}>
                <View style={styles.listContainer}>
                    <Image source={require('../Img/ic_task_icon.png')} style={styles.photo} />
                    <View style={styles.container_text}>
                        <Text style={styles.title}>
                            {item.task_name}
                        </Text>
                        <Text style={styles.description}>
                            ETA : {item.task_eta}
                        </Text>
                    </View>
                </View>
            </View>
        </TouchableHighlight>}
    keyExtractor={item => item.id}
/>


{this.props.navigation.navigate（'OtherPage'，{text:item.task_name，index:index}}>
{item.task_name}
预计到达时间：{item.task_ETA}
}
keyExtractor={item=>item.id}
/>
如果您只需要在按下项目时更改背景色（即，当手指向上时更改回背景色），您可以自定义底层
可触摸高光的
参考底色
和
动态不透明度
，以实现所需：

<ListItem underlayColor="#ff0000" activeOpacity={1} title="Title" onPress={yourClickHandler} />


您好，为什么要使用prevState？您好，我用来编写prevState，在这种情况下不需要它。我收到一条警告：在现有状态转换期间无法更新…您看到了吗？：我尝试了您的解决方案，但onPress事件不起作用，我获取了所有具有notSelected样式的项目，无法编辑当前选定的项目。我试图在构造函数中绑定MClickHandler，但它也不起作用。你看到了吗？
<FlatList
    data={this.getAllTask()}
    renderItem={({ item, index }) =>
    <TouchableHighlight
        onPress={() => {this.props.navigation.navigate('OtherPage', {text: item.task_name, index: index})}}>
            <View style={styles.customRowContainer}>
                <View style={styles.listContainer}>
                    <Image source={require('../Img/ic_task_icon.png')} style={styles.photo} />
                    <View style={styles.container_text}>
                        <Text style={styles.title}>
                            {item.task_name}
                        </Text>
                        <Text style={styles.description}>
                            ETA : {item.task_eta}
                        </Text>
                    </View>
                </View>
            </View>
        </TouchableHighlight>}
    keyExtractor={item => item.id}
/>

<ListItem underlayColor="#ff0000" activeOpacity={1} title="Title" onPress={yourClickHandler} />