我想将“跟随”按钮的视图更改为在单击特定列表视图按钮时取消关注。当前,当我按下任何跟随按钮时,列表视图中的每个跟随按钮都变为取消跟随。我只想更改列表视图中的特定关注按钮?
/ ***示例React Native应用*https://github.com/facebook/react-native* @流* /
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',
}
});
所有按钮切换为取消跟随,因为所有按钮都使用相同的状态this.state.follow
。因此,当它变为false时,所有按钮都将显示为不跟随。
您可以做的是在用户对象中添加属性follow
,而不是测试this.state.follow ?...
,您可以执行user.follow ?...
。
并且在updateSearchStatus()
函数中,您可以传递用户以找到它并更改其follow
状态。
以下是您的示例:
为被单击/选择的商店创建状态
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>
希望对您有所帮助,这会有所帮助
对此问题有很多解决方案,但我的建议是这样。在您的项目文件夹中创建一个名为components