我想发送味精给我的联系人。我也可以访问通讯录,但是当我将数据从第二即时消息传递到第一屏幕时,无法从中创建平面列表。将第二屏幕数据也设置为状态。
请转到反应本机expo链接并检查源代码。expo需要移动apk才能正常运行。
这是我的反应博览会链接
https://snack.expo.io/@vikraant/bulk-check
import React, { Component } from 'react';
import {AsyncStorage} from 'react-native';
import Constants from 'expo-constants';
import * as Permissions from 'expo-permissions';
import DateTimePicker from "react-native-modal-datetime-picker";
import {
TextInput,
Text,
View,
Image,
StyleSheet,
KeyboardAvoidingView,
ProgressBarAndroid,
FlatList,
ActivityIndicator,
TouchableOpacity,
Keyboard
} from 'react-native';
export default class BulkInvitationActivity extends Component {
constructor(props) {
super(props);
this.clientId = Constants.deviceId;
this.state = {usr_mobile:[] }
}
onSelect = (data) =>{
this.setState(data)
}
contactlist = () =>{
this.props.navigation.navigate('Contact',{ onSelect: this.onSelect });
}
render() {
return (
<KeyboardAvoidingView style={styles.container} behavior='padding'>
<View style={styles.SectionStyle}>
<Text style={[{ width: "60%",margin:'auto'}]}>Add Guest</Text>
<TouchableOpacity style={[{ width: 100,margin:'auto',textTransform:'lowercase'}]}
onPress = {this.contactlist}>
<Text style = {styles.submitButtonText}>contacts</Text>
</TouchableOpacity>
</View>
<View style={{width:'95%'}}>
<Text>{JSON.stringify(this.state.usr_mobile)}</Text>
<FlatList
data={this.state.usr_mobile}
extraData={this.state.usr_mobile}
renderItem={({ item }) =>
(
<Text style={{backgroundColor:'gray',color:'#fff',border:1,margin:2,padding:5}}>{item.mobileno}</Text>
)}
enableEmptySections={true}
style={{ marginTop: 10 }}
keyExtractor={(item, index) => index.toString()}
/>
</View>
<View>
<TouchableOpacity style={[{ width: "90%",margin:'auto',textTransform:'lowercase'}]}>
<Text style = {styles.submitButtonText}>Send Invitation</Text>
</TouchableOpacity>
</View>
</KeyboardAvoidingView>
);
}
}
const styles = StyleSheet.create({
container: {
display:'flex',
alignItems: 'center',
flexDirection: 'column'
},
submitButtonText:{
textAlign:'center',
padding:10,
color:'#fff',
backgroundColor:'#062c47',
// width: "100%"
},
SectionStyle: {
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5F6F7',
borderBottomWidth: 1,
borderColor: '#000',
height: 40,
borderRadius: 5,
marginTop: 50,
}
});
第二屏幕代码-
import React, { Component } from 'react';
import * as Permissions from 'expo-permissions';
import * as Contacts from 'expo-contacts';
import {
StyleSheet,
FlatList,
Button,
Alert,
View,
CheckBox,
TouchableOpacity,
Text,
Platform,
PermissionsAndroid,
} from 'react-native';
export default class ContactList extends Component {
constructor(props){
super(props);
this.state ={item:'',check:{},selecteditem:[]}
}
async componentDidMount(){
let {status} = await Permissions.askAsync(Permissions.CONTACTS);
if (status=='granted') {
let contact = await Contacts.getContactsAsync();
// console.log(contact);
this.setState({ item:contact.data})
}else{
alert(status);
}
}
handleChange(e) {
console.log(e.nativeEvent);
if (e.nativeEvent.value==true) {
e.nativeEvent.value=='false';
}
}
select_contact(number){
const checkCopy = {...this.state.check}
if (checkCopy[number]) checkCopy[number] = false;
else checkCopy[number] = true;
this.setState({ check: checkCopy });
console.log(this.state.check);
}
back = () =>{
this.props.navigation.navigate('Product');
this.props.navigation.state.params.onSelect({ usr_mobile:this.state.check});
}
render() {
return (
<View>
<Text onPress = {this.back.bind(this)} style={{padding:5,margin:5,backgroundColor:'#000', textAlign:"center",color:'#fff',}}>Back</Text>
<FlatList
data={this.state.item}
renderItem={({ item }) => (
<View style={{padding:10,flexDirection:'row'}}>
<CheckBox
value = { this.state.check[item.phoneNumbers[0].number] }
onChange = {() => this.select_contact(item.phoneNumbers[0].number) }
></CheckBox>
<Text style={{padding:2}}>{item.firstName}</Text>
</View>
)}
enableEmptySections={true}
style={{ marginTop: 10 }}
keyExtractor={(item, index) => index.toString()}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: '#ecf0f1',
},
input: {
width: "90%",
height: 44,
padding: 10,
borderWidth: 1,
borderColor: 'black',
marginBottom: 10,
},
logbtn: {
width: "90%",
padding: 15,
margin: 5
}
});
谢谢。
答案 0 :(得分:0)
您需要将联系人列表作为道具传递,您可以像这样{...this.props}