Reactjs 从第2屏到第1屏获取联系人，并将其列出

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

请转到react native expo链接并检查源代码。expo需要移动apk才能正常运行

这是我的链接

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}来自'React'；
从“react native”导入{AsyncStorage}；
从“expo常量”导入常量；
从“expo Permissions”导入*作为权限；
从“反应本机模式日期时间选择器”导入日期时间选择器；
进口{
文本输入，
文本，
看法
形象,，
样式表，
键盘避免了gView，
累进类，
平面列表，
活动指示器，
可触摸不透明度，
键盘
}从“反应本机”；
导出默认类BulkInvitationActivity扩展组件{
建造师（道具）{
超级（道具）；
this.clientId=Constants.deviceId；
this.state={usr_mobile:[]}
}
onSelect=（数据）=>{
此.setState（数据）
}
联系人列表=（）=>{
this.props.navigation.navigate（'Contact'，{onSelect:this.onSelect}）；
}
render（）{
返回(
添加客人
联络
{JSON.stringify（this.state.usr_mobile）}
(
{item.mobileno}
)}
enableEmptySections={true}
style={{marginTop:10}}
keyExtractor={（项，索引）=>index.toString（）}
/>
发出邀请
);
}
}
const styles=StyleSheet.create({
容器：{
显示：'flex'，
对齐项目：“居中”，
flexDirection:“列”
},
submitButtonText：{
textAlign:“中心”，
填充：10，
颜色：“#fff”，
背景颜色：“#062c47”，
//宽度：“100%”
},
截面样式：{
flexDirection:'行'，
为内容辩护：“中心”，
对齐项目：“居中”，
背景颜色：“#F5F6F7”，
边界宽度：1，
边框颜色：“#000”，
身高：40，
边界半径：5，
玛金托普：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
            }
        });

import React，{Component}来自'React'；
从“expo Permissions”导入*作为权限；
从“世博会联系人”导入*作为联系人；
进口{
样式表，
平面列表，
按钮
警觉的，
看法
复选框，
可触摸不透明度，
文本，
平台，
许可证Sandroid，
}从“反应本机”；
导出默认类ContactList扩展组件{
建造师（道具）{
超级（道具）；
this.state={item:''，检查：{}，选择编辑项：[]}
}
异步组件didmount（）{
让{status}=wait Permissions.askAsync（Permissions.CONTACTS）；
如果（状态==“已授予”）{
let contact=等待联系人。getContactsAsync（）；
//控制台日志（联系人）；
this.setState（{item:contact.data}）
}否则{
警报（状态）；
}
}
手变（e）{
控制台日志（例如nativeEvent）；
if（e.nativeEvent.value==true）{
e、 nativeEvent.value=='false'；
}
}
选择联系人（号码）{
const checkCopy={…this.state.check}
如果（checkCopy[number]）checkCopy[number]=false；
else checkCopy[number]=真；
this.setState（{check:checkCopy}）；
console.log（this.state.check）；
}
后退=（）=>{
this.props.navigation.navigate（'Product'）；
this.props.navigation.state.params.onSelect（{usr_mobile:this.state.check}）；
}
render（）{
返回(
返回
(
此。请选择_联系人（item.phoneNumbers[0].number）}
> 
{item.firstName}
)}
enableEmptySections={true}
style={{marginTop:10}}
keyExtractor={（项，索引）=>index.toString（）}
/>
);
}
}
const styles=StyleSheet.create({
容器：{
弹性：1，
对齐项目：“居中”，
为内容辩护：“中心”，
背景颜色：“#ecf0f1”，
},
输入：{
宽度：“90%”，
身高：44，
填充：10，
边框宽度：1，
边框颜色：“黑色”，
marginBottom:10，
},
logbtn：{
宽度：“90%”，
填充：15，
保证金：5
}
});

---

提前感谢。

您需要将联系人列表作为道具传递，您可以像这样获取他们

{…this.props}

获取数据，但无法从中创建平面列表@kodakIn在第一屏中的onselect方法应该是.setState（usr_mobile:data）；它已设置状态，但我无法创建平面列表@SanjayI强烈地感觉到你在以错误的方式使用状态和道具。。从这个方向思考，并在渲染平面列表之前检查是否有数据（在渲染之前检查）。如果您有数据，则表示您以错误的方式将数据传递到平面列表。。如果你没有数据，那你就知道该做什么了。我尽了我所知的一切可能。您可以查看代码或转到link@Sanjay吗