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

Question

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

我尝试了多种方法，在这个例子中使用了 map 方法，但是这会在底部视图中同时显示所有标记。我只想显示当前选择的标记。这个bottom view也有最小化/展开的功能，这个是无关紧要的。

我添加了一个 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

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

为了在 showing/hiding 和 Details 组件之间切换，您需要为每个对象添加一个 showDetails: false 属性 users 数组。

also don't forget to use an id for each element

示例数据如下所示：

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

如下所示，我用 TouchableOpacity 元素包裹了 Marker 和 Details，您可以根据自己的需要进行更改。

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，您还需要一个处理函数来在隐藏和显示 Details 之间切换，方法是在 false[= 之间更改 showDetails 值40=] 和真:

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> )

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

React Native Expo MapView - Passing Marker Details to an Expanding Bottom View

javascript

react-native

expo

marker