React Native 将选定的 asyncStorage 值传递给 Popup onPress答案

【问题标题】：React Native Pass Selected asyncStorage value to Popup onPressReact Native 将选定的 asyncStorage 值传递给 Popup onPress
【发布时间】：2019-11-23 06:23:47
【问题描述】：

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

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

Like this

我希望值“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>

这是我的弹出页面。

请各位高手帮帮我。

【问题讨论】：

在弹出页面中使用道具可以做到这一点。例如名字和姓氏，无论你使用什么传递它的道具，当点击任何联系人而不是直接调用 setPop(true) 创建一个方法并从 .map 传递 obj，然后从该 obj 传递名字的值，姓。让我知道这是否有帮助或您需要任何样品
您好，非常感谢您提供样品。 :)
显然，我的 setPopup 是重复的。我有其他具有相同 setpopup 的弹出页面，因此没有显示正确的结果。

标签： react-native react-native-navigation asyncstorage react-native-popup-menu react-native-modal

【解决方案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 中的详细信息道具发送到弹出窗口

【讨论】：