react-native - React Native 将选定的 asyncStorage 值传递给 Popup onPress

Question

我正在尝试为我选择的值制作一个弹出屏幕。这是在本地存储中。

我正在尝试将值 firstname、lastname、phone 传递给 Popup。

像这样

我希望值“h”显示在“呼叫”和“文本”旁边。

      {
    favContact.map((obj,i)=>{
      return (
        <View style={[HomePageStyles.ContactList, {width:95}]}>

        {/* CONTACT CALL/MESSAGE POPUP */}
        <ContactPopup Popup={Popup} setPopup={setPopup} />

        {/* CONTACT  */}
        <TouchableOpacity onPress={() => {setPopup(true)}
        }>

            {/* CONTACT ICON */}
            { showIcon }

            {/* CONTACT NAME */}
            <Text numberOfLines={1} style={[Fonts.ContactNameFonts, {textAlign:'center', fontSize:11, paddingHorizontal:15}]}>{obj.firstname}</Text>
        </TouchableOpacity>
        {/* END OF CONTACT */}
        </View>
            )
          })
        }

这是我最喜欢的联系页面。

<Modal isVisible={props.Popup} hideModalContentWhileAnimating={true}
backdropTransitionOutTiming={0}
onBackdropPress={() => props.setPopup(false)}
onSwipeComplete={() => props.setPopup(false)}
swipeDirection="down"
animationInTiming={550} animationOutTiming={850}>

  <View style={AddPopupStyles.Container}>

    <View style={AddPopupStyles.ImgCont}>

      <Image style={AddPopupStyles.Img}source={require('../assets/icons/swipe.png')}/>

    </View>

    <Text style={AddPopupStyles.Heading}>{firstname}{lastname}</Text>

      <TouchableOpacity style={AddPopupStyles.TextCont}
                        onPress = {() => Communications.phonecall( phone , true)}        
      >
        <Text style={AddPopupStyles.Text}>Call {firstname}{lastname}</Text>
      </TouchableOpacity>

      <TouchableOpacity style={AddPopupStyles.TextCont}
                        onPress={()  => Communications.text(phone, 'Hey ' + firstname + ', im in need of a Ryde. Are you able to pick me up? This is my current location: ' )}
      >
        <Text style={AddPopupStyles.Text}>Text</Text>
      </TouchableOpacity>

      <TouchableOpacity style={AddPopupStyles.TextCont}
        onPress={() => {props.setPopup(false)}}
      >
        <Text style={[AddPopupStyles.Text, AddPopupStyles.CancelText]}>
          Cancel
        </Text>
      </TouchableOpacity>

  </View>

</Modal>

这是我的弹出页面。

请各位高手帮帮我。

Answer 1

     {
    favContact.map((obj,i)=>{
      return (
        <View style={[HomePageStyles.ContactList, {width:95}]}>

        {/* CONTACT CALL/MESSAGE POPUP */}
        <ContactPopup Popup={Popup} setPopup={setPopup} details = {this.state.popupDetails} />

        {/* CONTACT  */}
        <TouchableOpacity onPress={() => {this.onPressContact(obj)}
        }>

            {/* CONTACT ICON */}
            { showIcon }

            {/* CONTACT NAME */}
            <Text numberOfLines={1} style={[Fonts.ContactNameFonts, {textAlign:'center', fontSize:11, paddingHorizontal:15}]}>{obj.firstname}</Text>
        </TouchableOpacity>
        {/* END OF CONTACT */}
        </View>
            )
          })
        }


    onPressContact = (contactDetails) => {
          this.setState({popupDetails: contactDetails})
          setPopup(true)
       }

and next in popup screen 

    <Modal isVisible={props.Popup} hideModalContentWhileAnimating={true}
backdropTransitionOutTiming={0}
onBackdropPress={() => props.setPopup(false)}
onSwipeComplete={() => props.setPopup(false)}
swipeDirection="down"
animationInTiming={550} animationOutTiming={850}>

  <View style={AddPopupStyles.Container}>

    <View style={AddPopupStyles.ImgCont}>

      <Image style={AddPopupStyles.Img}source={require('../assets/icons/swipe.png')}/>

    </View>

    <Text style={AddPopupStyles.Heading}>{props.details.firstname}{props.details.lastname}</Text>

      <TouchableOpacity style={AddPopupStyles.TextCont}
                        onPress = {() => Communications.phonecall( phone , true)}        
      >
        <Text style={AddPopupStyles.Text}>Call {props.details.firstname}{props.details.lastname}</Text>
      </TouchableOpacity>

      <TouchableOpacity style={AddPopupStyles.TextCont}
                        onPress={()  => Communications.text(phone, 'Hey ' + props.details.firstname + ', im in need of a Ryde. Are you able to pick me up? This is my current location: ' )}
      >
        <Text style={AddPopupStyles.Text}>Text</Text>
      </TouchableOpacity>

      <TouchableOpacity style={AddPopupStyles.TextCont}
        onPress={() => {props.setPopup(false)}}
      >
        <Text style={[AddPopupStyles.Text, AddPopupStyles.CancelText]}>
          Cancel
        </Text>
      </TouchableOpacity>

  </View>

</Modal>

简而言之，在这里我所做的是点击联系人我正在调用一个函数 onPressContact 并存储该特定联系人的 obj，然后使用 contactPopup 中的详细信息道具发送到弹出窗口