Сейчас я работаю над экраном редактирования. Поток следующий: есть TabNavigator, где на одной из вкладок есть MapView с множеством включенных маркеров. Затем пользователь может выбрать маркер для просмотра информации о маркере. После нажатия маркера пользователь может затем изменить местоположение маркера, а затем, как только они изменили местоположение маркера и обновили местоположение в API, я хотел бы вернуть их к просмотру карты со всеми маркерами. . В настоящее время опция «Назад» приводит их к случаю, когда они могут снова изменить местоположение маркера.
Моя настройка для моей навигации выглядит следующим образом:
StackNavigator:
MainTabNavigator,
HomeScreen,
InformationScreen
//OtherScreens.
MainTabNavigator:
Home: {
screen: HomeScreen
}
//Other tabsВ методе рендеринга домашнего экрана у меня есть что-то вроде этого:
return (
<MapView
style={{ flex: 1 }}
onRegionChange={this.onRegionChange}
showsUserLocation={true}
showsMyLocationButton={false}
>
{!editing && this.state.markers.map((marker) => {
return(
<MapView.Marker
key={marker._id}
coordinate={{latitude: +marker.latitude, longitude: +marker.longitude}}
anchor={{x: 0.5, y: 1}}
centerOffset={{x: 0.5, y: 1}}
onPress={() => {this.onPress(marker)}}
>
</MapView.Marker>
)
})
}
{editing &&
<MapView.Marker
coordinate={{latitude: +marker.latitude, longitude: +marker.longitude}}
anchor={{x: 0.5, y: 1}}
centerOffset={{x: 0.5, y: 1}}
onDragEnd={(e) => { var new_marker = Object.assign({}, marker); new_marker.latitude = e.nativeEvent.coordinate.latitude; new_marker.longitude = e.nativeEvent.coordinate.longitude; this.props.dispatch(setMarker(new_marker));}}
draggable
>
</MapView.Marker>
}
</MapView>
</View>
);Где реквизит editing управляется моим состоянием редукции.
На информационном экране у меня есть следующий код, чтобы обновить местоположение маркера, а затем сбросить состояние.
update = () => {
//Commit the changes that the user made.
const { marker, user, navigation } = this.props;
this.setState({
loading: true
})
//Save the changes on the API.
fetch(API).then(response => {
this.setState({
loading: false,
changeMade: false,
editing: false,
});
const resetAction = NavigationActions.reset({
index: 1,
actions: [
//Main is the MainTabNavigator
NavigationActions.navigate({ routeName: 'Main' }),
//InformationScreen is the screen where we do the editing.
NavigationActions.navigate({ routeName: 'InformationScreen'})
],
key: null
});
this.props.navigation.dispatch(resetAction);
this.props.dispatch(setEditing(false));
});
}Теперь он, кажется, переходит к экранам, когда сбрасывает стек, что является просто ужасным пользовательским интерфейсом, а затем не отвечает на главном экране после того, как вы вернетесь. Я исследую это, это может быть бесконечный цикл или что-то в этом роде. Если мне нужно объяснить что-то яснее или добавить больше кода, просто оставьте комментарий, я постараюсь объяснить лучше.
В настоящее время я изучаю возможность отключения всех анимаций здесь: React Navigation: перейдите обратно к корню с помощью NavigationActions.reset, goBack и getStateForAction
