React Native Expo MapView - 将标记详细信息传递给扩展的底部视图

Question

我正在使用 React Native Expo 构建一个应用程序，该应用程序具有各种标记的屏幕。这些来自 firebase JSON 文件。一切正常，除了屏幕底部的视图，我想在单击时在标记点上显示信息（标题、描述、附加图像等）。

我尝试了多种方法，在此示例中使用 map 方法，但是这会在底部视图中一次显示所有标记。我只想显示当前选择的标记。这个底视图还具有最小化/扩展的功能，这是无关紧要的。

我添加了一个 onPress 事件，我希望它将当前显示的标记设置为按下的标记。

这是我所做的：

// ## Imports
// ## Firebase codeblock

function MapExp() {

   // I've removed irrelevant constants/functions for minimizing bottom view.
   
   // Initial empty array of users (marker points)
   const [users, setUsers] = useState([]); 
   const windowHeight = Dimensions.get("window").height;

   const [point, setPoint] = useState([]);

   const pressMarker = (i) => {
      console.log(i.Title);
      console.log(i.Description);
      setPoint(i.Title);
    };

   useEffect(() => {
      const dbh = firebase.firestore();
      dbh
      .collection("Map_DB")
      .get()
      .then((querySnapshot) => {
         const users = [];
         querySnapshot.forEach((documentSnapshot) => {
            users.push({
               ...documentSnapshot.data(),
               key: documentSnapshot.id,
            });
         });
         // Filling array 'users' with all the map markers from DB
         setUsers(users);
      });
   }, []);

   
   return (
      <MapView
        initialRegion={{ latitude: 48.87389506, longitude: 2.295039178, latitudeDelta: 0.01, longitudeDelta: 0.01 }}
        r
        style={{ flex: 1, minHeight: windowHeight }}
        provider={PROVIDER_GOOGLE}
        customMapStyle={mapStyle}
        showsUserLocation={true}
      >
       {users.map((i, index) => (
          <Marker
            key={index}
            onPress = {() => pressMarker(i)}
            coordinate={{
              latitude: i.Latitude,
              longitude: i.Longitude,
            }}
            title={i.Title}
            description={i.Description}
          />
        ))}
      </MapView>

      {/* ##### ATTEMPTING TO ADD EXPAND VIEW ###### */}
      {users.map((i, index) => (
         <View style={styles.expandingView}>
            <TouchableOpacity style={styles.touchableButton } onPress={toggleCollapsed}>
               <Image source={require("../assets/upArrowWhite.png")} style={styles.arrowLogo}></Image>
            </TouchableOpacity>
            <Animated.View style={{maxHeight: animationHeight}}>
               <View style={styles.pointImageContainer}>
                  <Image style={styles.pointImage} source={require("../assets/sunsetCrop.png")}  />
               </View>
               <View style={styles.paragraphContainer}>
                  <Text style={styles.paragraph}>{i.Title}</Text>
                  <Text style={styles.paragraph}>{i.Description}</Text>
               </View>
            </Animated.View>
         </View>
      ))}
  );
}
I have also added the console log statements to see if I can correctly log the currently pressed marker's details 

export default MapExp;

pressMarker 应该触发 setPoint，但我不确定如何执行此操作。然后我希望底部视图“展开视图”将标题等显示为文本。

有没有更好的方法将当前标记数据传递到屏幕的展开视图/文本组件中？

在 pressMarker 事件中，我也可以成功登录控制台，按下标记标题和描述没有问题：

pressMarker = (i) => {
      console.log(i.Title);
      console.log(i.Description);
      setPoint(i.Title);

问题是将当前“点”设置为所选标记，以显示在屏幕底部的展开视图中。

Answer 1

首先，您需要创建一个组件来显示标记的额外细节。它可以是一个单独的组件或隐式定义。

要在显示/隐藏Details 组件之间切换，您需要为users 数组中的每个对象添加showDetails: false 属性。

也不要忘记为每个元素使用一个 id

示例数据如下所示：

const users = [
  {id: 0, title: 'first point', description: '', coordinatets: {lat: 0, long: 0}, showDetails: false},
  // rest of the data...
]

如下所示，我将Marker 和Details 包装为TouchableOpacity 元素，可以根据您的需要进行更改。

function MarkerWithDetails({point, onToggle}) {
  const {coordinates, title, description, showDetails} = point;

  return(
    <TouchableOpacity onPress={onToggle}>
      <Marker coordinate={{latitude: lat, longitude: long}}/>
      {showDetails && <Details title={title} description={description}/>}
    </TouchableOpacity>
  )
}

现在，Details 组件仅在具有 showDetails: true 属性时才会呈现额外的细节。

现在是渲染 MarkerWithDetails 的时候了，您还需要一个处理函数来通过在 false 和 true 之间更改 showDetails 值来在隐藏和显示 Details 之间切换>：

handleToggle = (id) => {
  setUsers(prevState => prevState.map(user => (  
        user.id === id ? {...user, showDetails: !user.showDetails} : user     
     ))
  )
}

return (
    <MapView
        initialRegion={{ latitude: 48.87389506, longitude: 2.295039178, latitudeDelta: 0.01, longitudeDelta: 0.01 }}
        r
        style={{ flex: 1, minHeight: windowHeight }}
        provider={PROVIDER_GOOGLE}
        customMapStyle={mapStyle}
        showsUserLocation={true}
      >
       {users.map((user) => (<MarkerWithDetials point={user} onToggle={() => handleToggle(user.id)}/>))}
    </MapView>
)