Question

我使用React本机元素库在平面列表中创建列表项。我显示了一个用户列表，单击后需要处理样式。

我的代码是：

  <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>

我如何编辑单击的ListItem项目的背景？

Answer 1

您可以执行以下操作：

condition

，然后在<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} />函数中，使用onItemClickHandler将selectedIndex的值设置为状态。

基本上，由于this.setState事件而获得选定的索引，并将其与onPress函数中的当前索引进行比较。基于此，您可以设置样式变量。

Answer 2

您可以轻松存储活动项目的状态，并在onItemClickHandler功能上设置状态，现在您可以根据项目状态（是否处于活动状态）更改样式

<View style={{ flex: 1 }}>
<FlatList
  data={this.state.data}
  renderItem={({ item }) => (
    <ListItem
      style={this.state.active === item.id ? styles.active : null} //***
      leftAvatar={{ source: { uri: item.avatar } }}
      title={`${item.firstName} ${item.lastName}`}
      // subtitle={item.email}
      chevron
      onPress={() => this.onItemClickHandler(item.id)}
    />
  )}
  keyExtractor={item => item.email}
  ItemSeparatorComponent={this.renderSeparator}
  ListHeaderComponent={this.renderHeader}
/>

<Button
  title='Suivant'
  onPress={() => navigation.navigate('LastStepToShare')}
  containerStyle={{ marginBottom: 15 }}
/>
</View>

和


this.onItemClickHandler(id) => {
  this.setState({
    active: id
  })
}

Answer 3

这是示例代码段，这可能对您有帮助：

<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}
/>

Answer 4

如果仅在按下项目时需要更改背景颜色（即，当手指向上时更改背景颜色），则可以自定义underlayColor和activeOpacity基础TouchableHighlight的数量以实现您所需要的：

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

反应本机元素句柄ListItem单击

4 个答案: