일단 누르면 topBar의 rightButton 아이콘을 변경하고이를 토글로 사용하여 맵이나 그리드에 항목을 표시해야합니다. 문제는 화면 구성 요소 옵션이 정적이며 화면을 다시 렌더링하는 방법을 찾을 수 없다는 것입니다. 정적 옵션에 소품을 전달하는 방법이 있지만 여전히 버튼을 눌렀을 때 다른 아이콘을 설정하기 위해 화면을 다시 렌더링 할 수 없습니다. 이 문제를 해결하는 방법에 대한 아이디어가 있습니까? 감사합니다!
내 코드 :
const ResultsScreen = ({ componentId }) => {
const [isMapActive, setIsMapActive] = useState(false);
const [items, setItems] = useState([]);
useNavigationButtonPress((event) => {
if(event.buttonId == 'toggleMapGrid') {
setIsMapActive(!isMapActive);
}
});
const ResultsSection = isMapActive ? (
// TODO: Temporary no-map
<View style={{ backgroundColor: 'red', flex: 1 }} />
) : (
<ItemsGrid parentComponentId={componentId} items={items} />
);
return (
<SafeAreaView style={styles.container}>
<FilterList style={styles.filters} />
{ResultsSection}
</SafeAreaView>
);
};
ResultsScreen.options = () => ({
topBar: {
animate: true,
rightButtons: [
{
id: 'toggleMapGrid',
icon: R.images.location24, // or R.images.map24, depending on isMapActive
},
],
},
});
얼마 후 mergeOptionsAPI를 사용하여이 문제를 해결했습니다.
const ResultsScreen = () => {
...
const [isMapActive, setIsMapActive] = useState(false);
Navigation.mergeOptions(componentId, {
topBar: {
rightButtons: [
{
id: 'advancedFilters',
icon: R.images.filter24,
},
{
id: 'toggleMapGrid',
icon: isMapActive ? R.images.list24 : R.images.location24,
},
],
},
});
}
...
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다