Как изменить представление для отдельного списка в реагировать на родной?
Я хочу изменить вид кнопки "Follow", чтобы отменить подписку на нажатие определенной кнопки просмотра списка. В настоящее время, когда я нажимаю любую кнопку следования, каждая последующая кнопка в просмотре списка меняется на следующую. я просто хочу изменить конкретную кнопку в списке?
/ ** * Пример собственного приложения React * 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',
}
});
2 ответа
Все кнопки переключаются, чтобы отписаться, потому что вы используете то же состояние this.state.follow за все кнопки. Поэтому, когда он становится ложным, все кнопки будут отображаться после.
Что вы можете сделать, это добавить атрибут follow в вашем пользовательском объекте и вместо тестирования this.state.follow ?... ты можешь сделать user.follow ?...,
И в твоем updateSearchStatus() функция, вы можете передать пользователю, чтобы иметь возможность найти его и изменить его followстатус.
Вот пример для вас:
Создать состояние магазина, в котором кликают / выбирают
this.state = { selected: null };
Передайте предметный указатель, который выбран / выбран
updateSearchStatus = (index) => this.setState({ selected : index });
Ваш renderItem должен быть установлен на элементе 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, внутри этой папки создайте файл с именем 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>
);
}
......
....//
Надеюсь, это поможет.