我需要尽可能多的帮助。 在我的代码中，我有一个返回到我视图的场景，一个带有名字的数组。但是，我也想做点什么。当我点击名称时，我想把我点击过的名字和过去的邮件发送到我的帖子方法，然后返回另一个包含电子邮件人员信息的场景。这是我的代码：
包含所有元素的我的用户类
import React from 'react';
import ListaItens from './ListaUsers'
import BarraNavegacao from './BarraNavegacao';
import {View,Image,Alert,TouchableHighlight,AsyncStorage} from 'react-native';
import axios from 'axios';
export default class Users extends React.Component {
constructor(props) {
super(props);
this.state = {tituloBarraNav: 'Colaboradores',testLocal:''};
}
我的刷新功能是组件用户
async refresh() {
let tmp_localData = {};
AsyncStorage.getItem('localData', (err, result) => {
//console.log(result);
tmp_localData = JSON.parse(result);
//console.log('Local temp: ', tmp_localData.User.email);
}).then((result) => {
tmp_localData = JSON.parse(result);
//console.log('Email: ', tmp_localData.email);
axios({
method: 'post',
url: 'my url'
data: {
email: 'someEmail@test.com,
}
},
console.log('aqui esta o email'),
).then((response) => {
//console.log('Get tmpLocal ----------',tmp_localData);
//console.log('Get response ----------',response);
tmp_localData.User = {
"userID": response.data.response.userID,
"displayName": response.data.response.displayName,
"email": response.data.response.email,
"avatar": response.data.response.avatar,
"gender": response.data.response.gender,
"Session": {
"token": response.data.response.token,
},
"FootID": response.data.response.FootID,
};
//this.refresh();
//console.log('Set tmpLocal',tmp_localData);
AsyncStorage.setItem('localData', JSON.stringify(tmp_localData), () => {
}).then((result) => {
this.props.navigator.push({id: 'MenuPrincipal'});
console.log('Navigator',this.props.navigator);
//Alert.alert('Clicou Aqui ');
});
}).catch((error) => {
if (error.response) {
// The request was made and the server responded with a status code
// that falls out of the range of 2xx
console.log(error.response.data);
console.log(error.response.status);
console.log(error.response.headers);
Alert.alert('Não foi possivel mudar o utilizador');
} else if (error.request) {
// The request was made but no response was received
// `error.request` is an instance of XMLHttpRequest in the browser and an instance of
// http.ClientRequest in node.js
console.log('erro de ligaçao', error.message);
Alert.alert('Não foi possivel mudar o utilizador');
console.log(error.request);
} else {
// Something happened in setting up the request that triggered an Error
console.log('erro de codigo no then', error.message);
Alert.alert('Não foi possivel mudar o utilizador');
}
console.log(error.config);
Alert.alert('Não foi possivel mudar o utilizador');
});
});
}
我在用户中的渲染
render(){
const {principal, conteudo,imgConteudo1,imgConteudo2, texto,box}= myStyle;
return(
<View style={principal}>
<BarraNavegacao back navigator={this.props.navigator} tituloProp={this.state.tituloBarraNav}/>
<TouchableHighlight onPress={() => {this.refresh();}}
clearButtonMode={'while-editing'}
activeOpacity={1} underlayColor={'white'}>
<ListaItens/>
</TouchableHighlight>
</View>
);
}
}
我有ListaItems组件，它将遍历一个数组，并将使用map方法放入ScroolView。所以代码是：
我的ListaItems类
import React from 'react';
import { ScrollView} from 'react-native';
import axios from 'axios';
import Items from './Items';
export default class ListaItens extends React.Component {
constructor(props) {
super(props);
this.state = {listaItens: [], listaEmail: [] };
}
componentWillMount() {
//request http
axios.get('my url')
.then((response) => {
this.setState({listaItens: response.data.response})
})
.catch(() => {
console.log('Erro ao imprimir os dados')
});
}
render() {
return (
<ScrollView>
{this.state.listaItens.map(item =>(<Items key={item.email} item={item}/>))}
</ScrollView>
);
}
}
最后一个组件是我希望在 ListaItems 中的scrollview内显示的构建组件。组件名称是Items。代码是：
我的项目类
import React, {Component} from 'react';
import {Text, Alert, View, Image,} from 'react-native';
export default class Items extends Component {
constructor(props) {
super(props);
this.state = {listaEmail: ''};
}
render() {
const {foto, conteudo, texto, box, test} = estilo;
return (
<View>
<Text/>
<Text/>
<View style={conteudo}>
<Image style={foto} source={{uri: this.props.item.avatar}}/>
<Text style={texto}>{this.props.item.displayName}</Text>
</View>
<View style={test}>
<Text style={texto}>{this.props.item.email}</Text>
</View>
</View>
);
}
}
因此，在电子邮件：“someEmail@test.com”上的post方法中，用户类中的 refresh（）函数，我想要充满活力，当我点击项目类中某个人的姓名时，我想在 this.props.item.email 上点击此处的电子邮件并将其放入在用户类的post方法参数---- refresh（）---- axios（）---数据---电子邮件：我想要过去的电子邮件。
请在这里帮忙。我现在很绝望，因为我已经尝试过而且我没有成功
答案 0 :(得分：1)
首先将Touchable移动到项目
export default class Items extends Component {
render() {
const { foto, conteudo, texto, box, test } = estilo;
return (
<View> //I'm not sure if the this.props.item.email is the one you use, just change it if you need.
<TouchableHighlight onPress={() => { this.props.callback(this.props.item.email); }}
clearButtonMode={'while-editing'}
activeOpacity={1} underlayColor={'white'}>
<Text />
<Text />
<View style={conteudo}>
<Image style={foto} source={{ uri: this.props.item.avatar }} />
<Text style={texto}>{this.props.item.displayName}</Text>
<View style={test}>
<Text>{this.props.item.email}</Text>
</View>
</View>
</TouchableHighlight>
</View>
);
}
}
他们会更改您接收电子邮件参数的功能。
refresh = (email) => {
let tmp_localData = {};
AsyncStorage.getItem('localData', (err, result) => {
tmp_localData = result;
}).then((result) => {
axios({
method: 'post',
url: 'my Url',
data: {
email: email,
}
})
})
}
他们可以通过道具
将功能传递给组件render() {
const { principal, conteudo, imgConteudo1, imgConteudo2, texto, box } =
myStyle;
return (
<View style={principal} >
<BarraNavegacao back navigator={this.props.navigator} tituloProp={this.state.tituloBarraNav} />
<ListaItens callback={this.refresh} />
</View>
);
}