Question

我想发送味精给我的联系人。我也可以访问通讯录，但是当我将数据从第二即时消息传递到第一屏幕时，无法从中创建平面列表。将第二屏幕数据也设置为状态。

请转到反应本机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
            }
        });

谢谢。

Answer 1

您需要将联系人列表作为道具传递，您可以像这样{...this.props}

将联系人从第二屏幕转到第一屏幕并列出其本机反应

1 个答案: