從 class 組件獲取數據到功能組件 - React Native

Question

我對 React Native 很陌生，對 javascript 沒有最多的經驗，所以雖然這可能很簡單，但我不知道該怎么做。 我有一個 class 組件，它在我的應用程序中就像一個彈出窗口。 它會在按下可觸摸的不透明度時彈出並顯示一個小菜單。 我正在嘗試獲取在該菜單上按下的按鈕的 ID，並將其發送回功能組件主屏幕（打開菜單的可觸摸不透明度所在的位置）。 我可以獲取按鈕的 ID，但我正在努力將這些數據從彈出窗口中取出並返回到我的主屏幕（功能組件）

這是我的主屏幕代碼：

import { StyleSheet, Text, View, Image,TouchableOpacity} from 'react-native'
import React,{useState} from 'react'
import tw, { create } from 'twrnc';
import Map from "../components/Map"
import { SafeAreaView } from 'react-native-safe-area-context';
import { BottomPopup } from '../components/popup';
import { selectTrucks} from '../slices/navSlice';
import { useSelector } from 'react-redux';


const Logistics = () => {
const Trucks = useSelector(selectTrucks);
let popupRef = React.createRef()
const onShowPopup = () => {
  popupRef.show()
}
const onClosePopup = () => {
  popupRef.close()
}
  return (
    <View style={{flex:1,resizeMode:'contain'}}>
    <View style={tw`h-12/16`}>
    <Map/>
    </View>
    <TouchableOpacity onPress={onShowPopup} style={{top:'-68%'}}>
    <Image
          source = {{uri: "https://icon-library.com/images/app-menu-icon/app-menu-icon-21.jpg" }}
          style = {{width:'20%', height:40,resizeMode:'contain'}}
    />
        <Text style={{color:'black',paddingLeft:2,fontSize: 26,fontWeight:"bold",top:-37,left:70}}>Truck {}</Text>
    </TouchableOpacity>
    <BottomPopup
    title = "Select Option"
    ref = {(target)=> popupRef = target}
    onTouchOutside={onClosePopup}
    data={Trucks.TrucksInfo}
   />
   <SafeAreaView style={{top:'-13%'}}>
   <Text style={{color:'darkgreen',paddingLeft:2,fontSize: 36,fontWeight:"bold"}}>123 Elmo Street</Text>
            <Text style={{color:'darkgreen',paddingLeft:2,fontSize: 24,fontWeight:"bold"}}>L4L 6L8, Mississauga, Ontario</Text>
            <Text style={{color:'darkgreen',paddingLeft:2,fontSize: 18,fontWeight:"bold"}}>Phone Number: 416-749-6857{'\n'}Client: Bobby Jeff{'\n'}Order Number: 7187181{'\n'}Packing Slip Number: 882929</Text>
            <Text style={{color:'black',fontSize: 18,paddingLeft:2}}>Customer Notified: Yes at 2:32 PM</Text>

   </SafeAreaView>
    </View>
  )
}

export default Logistics

const styles = StyleSheet.create({})

這是 class 組件彈出窗口的代碼：

import { Modal,Dimensions,TouchableWithoutFeedback,StyleSheet,View,Text,FlatList,TouchableOpacity} from "react-native";
import React from "react";
import { useNavigation } from '@react-navigation/native';
import Logistics from "../screens/Logistics";

const deviceHeight = Dimensions.get('window').height

export class BottomPopup extends React.Component {
    constructor(props){
        super(props)
        this.state = {
            show:false
        }
    }

    show = () => {
        this.setState({show:true})
    }
    close = () => {
        this.setState({show:false})
    }
    renderOutsideTouchable(onTouch) {
        const view = <View style = {{flex:1,width:'100%'}}/>
        if (!onTouch) return view

        return (
            <TouchableWithoutFeedback onPress={onTouch} style={{flex:1,width:'100%'}}>
                {view}
            </TouchableWithoutFeedback>
        )
    }
    renderTitle = () => {
        const {title} = this.props
        return (
            <View style={{alignItems:'center'}}>
            <Text style={{
                color:'#182E44',
                fontSize:25,
                fontWeight:'500',
                marginTop:15,
                marginBottom:30,
            }}>
                {title}
            </Text>
        </View>
        )
    }
    renderContent = () => {
       const {data} = this.props
        return (
            <View>
                <FlatList
                style = {{marginBottom:130}}
                showsVerticalScrollIndicator = {false}
                data={data}
                renderItem={this.renderItem}
                extraData={data}
                keyExtractor={(item,index)=>index.toString()}
                ItemSeparatorComponent={this.renderSeparator}
                contentContainerStyle={{
                paddingBottom:40
                }}
                />
            </View>
        )
    }
    
    renderItem = ({item}) => {
        return(
            <TouchableOpacity
            onPress={() => {this.close(),console.log(item.id)}}
            >
            <View style = {{height:50,flex:1,alignItems:'flex-start',justifyContent:'center',marginLeft:20}}>
                <Text style={{fontSize:18,fontWeight:'normal',color:"#182E44"}}>{item.name}</Text>
            </View>
            </TouchableOpacity>
        )
    }
    renderSeparator = () => {
        return(
        <View
        style={{
        opacity:0.1,
        backgroundColor:'#182E44',
        height:1
    }}
        />
        )
    }
    

    render() {

        let {show} = this.state
        const {onTouchOutside,title} = this.props
      return (
        <Modal
        animationType={"fade"}
        transparent={true}
        visible={show}
        onRequestClose={this.close}
        >
            <View style={{flex:1, backgroundColor:"#000000AA",justifyContent:'flex-end'}}>
                {this.renderOutsideTouchable(onTouchOutside)}
                <View style={{
                    backgroundColor:'#FFFFFF',
                    width:'100%',
                    paddingHorizontal:10,
                    maxHeight:deviceHeight*0.4}}
                    >
                    {this.renderTitle()}
                    {this.renderContent()}
                </View>
            </View>
        </Modal>
      )
    }
}

控制台登錄渲染項 function 為我提供了我需要的號碼，我只需要將這個號碼取出並返回到我的物流屏幕

Answer 1

您可以做的就像onTouchOutside一樣，您可以將 getId function 作為將返回id的道具傳遞。

我對 class 組件沒有太多經驗。 所以我在功能組件中添加了示例代碼。 你可以參考這個

const MainComponent = ()=>{
  const getIdFunc = (id)=>{
    //You will get id here
  }

  return(<View>
    {/* pass function here  */}
    <PopUpComponent getIdFunc={getIdFunc}/>
  </View>)
}

const PopUpComponent = (props)=>{
  return(<TouchableOpacity
    onPress={()=>{
      //call function by passing id here
      props.getIdFunc(id)
    }}
  >

  </TouchableOpacity>)
}