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...
]

如下所示，我用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的时候了，您还需要一个处理程序函数，通过在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>
)