0

我想更改关注按钮的视图以取消关注特定列表视图按钮的点击。目前，当我按下任何关注按钮时，列表视图中的每个关注按钮都会更改为取消关注。我只想更改列表视图中的特定关注按钮？

跟随按钮的图像

/** * 示例 React Native 应用程序 * https://github.com/facebook/react-native * @flow */

import React, { Component } from 'react';
import{Platform,StyleSheet,Text,View,Image,ListView,TouchableOpacity,ImageBackground,TouchableHighlight
} from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons';
import ActionButton from 'react-native-action-button';
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
import { TabNavigator, StackNavigator } from 'react-navigation';
import { Col, Row, Grid } from 'react-native-easy-grid';
import { Container, Header, Content, Card, CardItem, Thumbnail, Button, Left, Body, Right } from 'native-base';
const instructions = Platform.select({
  ios: 'Press Cmd+R to reload,\n' +
    'Cmd+D or shake for dev menu',
  android: 'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});

export default class Followers extends Component{
  static navigationOptions = { 
      headerTitle: 'Followers',      
      headerTitleStyle: {
          color: '#36292a',
          fontFamily: 'WorkSans-Regular',
          fontWeight: '300',
          marginLeft: 0
          },
        };

  constructor(props) {
    super(props);
    this.state = {
      follow: true,
    };
  }

  updateSearchStatus = () => 
    this.setState({ 
      follow : this.state.follow,
  });

    updateTitleStatus = () =>
    this.setState({
    } , () => {
      //this.ButtonState();
      if(this.state.follow == true){
        this.setState({
          follow : false
        });
      }else{
        this.setState({
          follow : true
        });
      }      
  });



displayImages(users){
    var {navigate} = this.props.navigation;
    return(  
    <View style={styles.container}>       
            <CardItem style={{height: 78,borderBottomWidth:1,borderColor: '#dadddf'}}>
              <Left>
                <Thumbnail source={{uri: users.avatar_url}} style={{height: 40, width: 40}} />
                <Body>
                  <Text style={styles.uploaderName}>{users.name}</Text>
                </Body>
              </Left>
              <Right>
                <TouchableHighlight underlayColor = '#DFE1E3' onPress={this.updateTitleStatus} >
                  { this.state.follow ? <View style={styles.followouter}><Text style={{color:'#fefefe',fontSize: 12}}>Follow</Text></View> 

                       : <View style={styles.unfollowouter}><Text style={{color:'#36292a',fontSize: 12}}>Unfollow</Text></View> 

                    }
                </TouchableHighlight>
              </Right>
            </CardItem>
       </View>      
    );
  }

  render() {
    var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
    var {navigate} = this.props.navigation;
    var users = [
      {
        name: 'Amy Farha',
        avatar_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/ladylexy/128.jpg',
        image: 'https://i.pinimg.com/564x/1c/f3/05/1cf305362aed02ad559f989687b1460e.jpg',
      },
      {
        name: 'Chris Jackson',
        avatar_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/adhamdannaway/128.jpg',
        image: 'https://i.pinimg.com/236x/a8/37/8e/a8378eeb01ec788a0068ea6b1b759091.jpg',
      },
      {
        name: 'Amanda Martin',
        avatar_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/brynn/128.jpg',
        image: 'https://i.pinimg.com/564x/8a/db/a7/8adba7207bdc82668bf06acc2734537e.jpg',
      },
      {
        name: 'Amy Farha',
        avatar_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/ladylexy/128.jpg',
        image: 'https://i.pinimg.com/564x/8a/db/a7/8adba7207bdc82668bf06acc2734537e.jpg',
      },
      {
        name: 'Chris Jackson',
        avatar_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/adhamdannaway/128.jpg',
        image: 'https://i.pinimg.com/564x/66/f0/2f/66f02f37eb54ff7f79f4c831212b231f.jpg',
      },
      {
        name: 'Amanda Martin',
        avatar_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/brynn/128.jpg',
        image: 'https://i.pinimg.com/564x/58/0c/78/580c789ded6ceeafdf71b792b0d57ac6.jpg',
      },
      {
        name: 'Amy Farha',
        avatar_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/ladylexy/128.jpg',
        image: 'https://i.pinimg.com/564x/a5/4d/4d/a54d4d37522a76a67002fa25b8e51515.jpg',
      },
      {
        name: 'Chris Jackson',
        avatar_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/adhamdannaway/128.jpg',
        image: 'https://i.pinimg.com/564x/47/6b/5c/476b5c4c9725ff3cd4bb3e5f61e4d6c3.jpg',
      },
      {
        name: 'Amanda Martin',
        avatar_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/brynn/128.jpg',
        image: 'https://i.pinimg.com/564x/ad/4b/06/ad4b06523eefacc30d09d41a9992029f.jpg',
      },
      {
        name: 'Christy Thomas',
        avatar_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/kfriedson/128.jpg',
        image: 'https://i.pinimg.com/564x/a5/4d/4d/a54d4d37522a76a67002fa25b8e51515.jpg',
      },
      {
        name: 'Melissa Jones',
        avatar_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/nuraika/128.jpg',
        image: 'https://i.pinimg.com/564x/82/ac/2e/82ac2e1c86692090173666496b9ce1cf.jpg',
      },
      {
        name: 'Amanda Martin',
        avatar_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/brynn/128.jpg',
        image: 'https://i.pinimg.com/564x/8a/db/a7/8adba7207bdc82668bf06acc2734537e.jpg',
      },
      {
        name: 'Christy Thomas',
        avatar_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/kfriedson/128.jpg',
        image: 'https://i.pinimg.com/564x/a5/4d/4d/a54d4d37522a76a67002fa25b8e51515.jpg',
      },
      {
        name: 'Melissa Jones',
        avatar_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/nuraika/128.jpg',
        image: 'https://i.pinimg.com/564x/ae/b6/ac/aeb6ac2f05644f1464c298bf979630e9.jpg',
      },
      {
        name: 'Christy Thomas',
        avatar_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/kfriedson/128.jpg',
        image: 'https://i.pinimg.com/564x/57/ac/3e/57ac3e724c61f9b9803d520574e42a1e.jpg',
      },
      {
        name: 'Melissa Jones',
        avatar_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/nuraika/128.jpg',
        image: 'https://i.pinimg.com/564x/66/f0/2f/66f02f37eb54ff7f79f4c831212b231f.jpg',
      },
    ];

    var cloneUsers = ds.cloneWithRows(users);

    return (  
    <View style={{flex: 1}}>    
        <ListView
          style={styles.listView}
          dataSource={cloneUsers}
          renderRow={this.displayImages.bind(this)}
          renderSeparator={(sectionId, rowId) => <View key={rowId} style={styles.separator} />}
        />     
        </View>

    );  
  }
}

const styles = StyleSheet.create({
  icon: {
    width: 26,
    height: 26,
  },
  container: {
    flex: 1,
    backgroundColor: '#fefefe'
  },
  uploaderName:{
    fontSize: 16,
    color: '#36292a'
  },
  actionButtonIcon: {
    color: '#fefefe',  
  },
  followouter: {
      justifyContent: 'center',
      alignItems: 'center',
      width: 90, 
      height: 25, 
      borderRadius: 4,  
      backgroundColor: '#f00039'
    },
  unfollowouter: {
    justifyContent: 'center',
      alignItems: 'center',
      width: 90, 
      height: 25, 
      borderRadius: 4, 
      borderWidth:1, 
      borderColor: '#999296',
  }

});
4

3 回答 3

0

这是一个例子：

为单击/选择的商店创建状态

this.state = { selected: null };

传递被单击/选择的项目索引

updateSearchStatus = (index) => this.setState({ selected : index });

您的renderItem应该在Item Button上设置一些条件

<View style={ this.state.selected == item.index ? styles.followouter : styles.unfollowouter}>
    <Text style={{color:'#fefefe',fontSize: 12}}>
        {this.state.selected == item.index ? 'Follow' : 'Unfollow'}
    </Text>
</View>

希望它会帮助你一个想法

于 2018-01-23T09:53:18.467 回答
0

这个问题有很多解决方案，但我的建议是这样的。在您的项目文件夹中创建一个名为components的文件夹，在该文件夹中创建一个名为Toggle.js的文件。在该文件中使用此代码。

    export default class extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isSelected: false,
      follow: true,
    }
  }
  updateTitleStatus = () =>
    this.setState({}, () => {
      if (this.state.follow == true) {
        this.setState({
          follow: false
        });
      } else {
        this.setState({
          follow: true
        });
      }
    });
  render() {
    return (
      <TouchableHighlight underlayColor='#DFE1E3' onPress={this.updateTitleStatus} >
        {this.state.follow ? <View style={styles.followouter}><Text style={{ color: '#fefefe', fontSize: 12 }}>Follow</Text></View>
          : <View style={styles.unfollowouter}><Text style={{ color: '#36292a', fontSize: 12 }}>Unfollow</Text></View>}
      </TouchableHighlight>
    );
  }
}
const styles = StyleSheet.create({
  followouter: {
    justifyContent: 'center',
    alignItems: 'center',
    width: 90,
    height: 25,
    borderRadius: 4,
    backgroundColor: 'dodgerblue'
  },
  unfollowouter: {
    justifyContent: 'center',
    alignItems: 'center',
    width: 90,
    height: 25,
    borderRadius: 4,
    borderWidth: 1,
    borderColor: '#999296',
  }
});

然后在您当前的文件中进行此更改。

    //.....
import Toogle from '../components/Toogle';
''''''
...
displayImages(users){
    var {navigate} = this.props.navigation;
    return(  
    <View style={styles.container}>       
            <CardItem style={{height: 78,borderBottomWidth:1,borderColor: '#dadddf'}}>
              <Left>
                <Thumbnail source={{uri: users.avatar_url}} style={{height: 40, width: 40}} />
                <Body>
                  <Text style={styles.uploaderName}>{users.name}</Text>
                </Body>
              </Left>
              <Right>
                <Toogle/>
              </Right>
            </CardItem>
       </View>      
    );
  }
......
....//

希望这会有所帮助。

于 2020-03-06T05:57:52.230 回答
0

所有按钮都切换为取消关注，因为您this.state.follow对所有按钮使用相同的状态。因此，当它变为 false 时，所有按钮都将显示取消关注。

你可以做的是follow在你的用户对象中添加一个属性，而不是测试this.state.follow ?...你可以做user.follow ?...。

在您的updateSearchStatus()函数中，您可以传递用户以便能够找到它并更改他的follow状态。

于 2018-01-23T09:36:21.897 回答