Переключить элемент массива в React Native?
По сути, это карта, на которой есть значки зданий, и когда вы нажимаете на здание, на ней отображается информация об этом здании. Я борюсь с логикой переключения отдельных элементов (строений) в моем массиве. Как, например, отображение только здания 1. Поэтому, когда я нажимаю на маркер, он должен показывать правильное здание в массиве. Я показываю частичный код для mapscreen.js, но при необходимости поделюсь всем.
Buildings.js
export const buildings = [
{
name: "Building1",
description: "This is some information",
xp: 25,
},
{
name: "Building2",
description: "This is some information.",
xp: 25,
},
];
Mapscreen.js
const [visible, setVisible] = useState(false);
//MAP THROUGH ARRAY, PASS ARRAY ITEMS AS PROPS TO OVERLAY COMPONENT
const myBuilding = buildings.map((building, i) => (
<OverlayBox key = {i} title = {building.name} info = {building.description} xp = {building.xp} />
));
const toggleOverlay = () => {
setVisible(!visible);
};
return (
<View>
<Overlay isVisible = {visible} onBackdropPress = {toggleOverlay}>
{myBuilding}**<--------DISPLAYS BOTH BUILDINGS RIGHT NOW**
</Overlay>
<Marker
onPress = {toggleOverlay}**<--------WANT TO DISPLAY BUILDING 1**
coordinate = {{ latitude: 34.0198536, longitude: -80.923467 }}
title = {"Building1"}
description = {"25 XP"}
/>
<Marker
onPress = {toggleOverlay}**<--------WANT TO DISPLAY BUILDING 2**
coordinate = {{ latitude: 34.0195536, longitude: -80.924467 }}
title = {"Building2"}
description = {"25 XP"}
/>
</View>
Ответы 2
Ваш подход немного странный
Я предлагаю тебе:
Сделайте только один OverlayBox
Перейдите в toggleOverlay индекс вашего здания, например
<Маркер onPress = {() => toggleOverlay (0)}
Установите индекс видимого здания в состояние, например
const toggleOverlay = (индекс) => { setVisibleBuilding (индекс); ... };
И передайте здание в свой OverlayBox, например
<OverlayBox building = {Buildings [visibleBuildingIndex]} ... />
Я обновил его, но не уверен, что иду в правильном направлении? (размещено под предыдущим кодом)
Удалось исправить, при необходимости выложу свое решение.
Вы находитесь на правильном пути, нет необходимости создавать более одного оверлейбокса, но вы можете отображать здания для динамического создания маркеров, просто сохраняйте координаты, цвет и то, что в массиве зданий, и, наконец, убедитесь, что настроили индекс здания перед рендерингом вашего OverlayBox
Отметьте как решенное, если все готово!
//ANSWER
const [visibleBuilding, setVisibleBuilding] = useState(0);
const buildings = [
{
name: "Building1",
description:
" This is some information.",
xp: 25,
},
{
name: "Building2",
description: "This is some information.",
xp: 25,
},
];
const [visible, setVisible] = useState(false);
const toggleOverlay = () => {
setVisible(!visible);
};
return (
<View style = {{ flex: 1 }}>
<Overlay isVisible = {visible} onBackdropPress = {toggleOverlay}>
<OverlayBox
building = {buildings[visibleBuilding]}
onPress = {() => toggleOverlay()}
key = {visibleBuilding}
title = {buildings[visibleBuilding].name}
info = {buildings[visibleBuilding].description}
xp = {buildings[visibleBuilding].xp}
/>
</Overlay>
<Marker
onPress = {() => {
toggleOverlay();
setVisibleBuilding(0);
}}
coordinate = {{ latitude: 34.0198536, longitude: -80.923467 }}
pinColor = "maroon"
title = {"Rutledge"}
description = {"25 XP"}
/>
<Marker
onPress = {() => {
toggleOverlay();
setVisibleBuilding(1);
}}
coordinate = {{ latitude: 34.0195536, longitude: -80.924467 }}
pinColor = "maroon"
title = {"Swearingen Engineering Center"}
description = {"25 XP"}
/>
</View>
);
Я обновляю свой код, вы говорите на первом этапе, что мне действительно не нужно отображать? просто визуализируйте одно наложение правильно, а также что такое visiblebuildingIndex?