javascript - React native: change style of ListView item on touch - Stack Overflow

admin管理员组

文章数量:1384229

I want to update the style of a ListView item when that item is pressed so that the enduser is aware that he/she selected an item.

Listview:

<ListView
    dataSource={this.state.dataSource}
    renderRow={this.renderFriend}
/>

Row renderer:

renderFriend(friend) {
  return (
    <TouchableHighlight onPress={ ??? }>
      <View style={styles.friendItem}>
        <View style={styles.profilePictureContainerNoBorder}>
          <Image
            source={{uri: '/' + friend.id + '/picture?width=500&height=500'}}
            style={styles.profilePicture}
          />
        </View>
        <Text style={styles.profileName}>{friend.name}</Text>
      </View>
    </TouchableHighlight>
  );
}

How could I change the style of the second View when the user activates the TouchableHighlight?

I would also like to add the selected object to an array of selected objects.

I want to update the style of a ListView item when that item is pressed so that the enduser is aware that he/she selected an item.

Listview:

<ListView
    dataSource={this.state.dataSource}
    renderRow={this.renderFriend}
/>

Row renderer:

renderFriend(friend) {
  return (
    <TouchableHighlight onPress={ ??? }>
      <View style={styles.friendItem}>
        <View style={styles.profilePictureContainerNoBorder}>
          <Image
            source={{uri: 'https://graph.facebook./' + friend.id + '/picture?width=500&height=500'}}
            style={styles.profilePicture}
          />
        </View>
        <Text style={styles.profileName}>{friend.name}</Text>
      </View>
    </TouchableHighlight>
  );
}

How could I change the style of the second View when the user activates the TouchableHighlight?

I would also like to add the selected object to an array of selected objects.

• javascript
• android
• listview
• reactjs
• react-native

Share Improve this question Follow asked Dec 6, 2015 at 14:26 Philippe MaesPhilippe Maes 5101010 silver badges2828 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

You should use the ponent state and store the selected friends ids in it when pressing the TouchableHighlight.

Something like:

constructor(props) {
  super(props);
  this.state = {
    selectedFriendIds: [],
  }
}

selectFriend(friend) {
  this.setState({
    selectedFriendIds: this.state.selectedFriendIds.concat([friend.id]),
  });
}

renderFriend(friend) {
  const isFriendSelected = this.state.selectedFriendIds.indexOf(friend.id) !== -1;
  const viewStyle = isFriendSelected ?
    styles.profilePictureContainerSelected : styles.profilePictureContainerNoBorder;

  return (
    <TouchableHighlight onPress={ () => this.selectFriend(friend) }>
      <View style={styles.friendItem}>
        <View style={viewStyle}>
          <Image
            source={{uri: 'https://graph.facebook./' + friend.id + '/picture?width=500&height=500'}}
            style={styles.profilePicture}
          />
        </View>
        <Text style={styles.profileName}>{friend.name}</Text>
      </View>
    </TouchableHighlight>
  );
}

in functional ponents for return selected element I use option onPress={()=>onTouch(i)}

'i' is a array index

for example for default list:

export const HomePage = () => {
  const list = [
    {
      title: 'FFFFFFFFFF',
      icon: 'timer',
      idx: 1
    },
    {
      title: 'AAAAAAAAAAAAAAA',
      icon: 'place',
      idx: 2
    },
    {
      title: 'BBBBBBBBB',
      icon: 'info',
      idx: 3
    },
  ];
  const onTouch = (idTouch) => {
    console.log(idTouch);
  };

  return (
    <ScrollView>
      <View style={styles.section}>
        <Text style={styles.text}>TEXT1</Text>
        <Text style={styles.text2}>tEXT2</Text>

        {list.map((item, i) => (
          
          <TouchableOpacity on activeOpacity={0.7} key={i+1} style={styles.item} onPress={()=>onTouch(i)}>
            <ListItem key={i} bottomDivider >
              <Icon name={item.icon} />
              <ListItem.Content >
                <ListItem.Title>{item.title}</ListItem.Title>
              </ListItem.Content>
              <ListItem.Chevron />
            </ListItem>
          </TouchableOpacity>
          
        ))}
      </View>
    </ScrollView>
  );
};

本文标签： javascriptReact native change style of ListView item on touchStack Overflow