Question

我目前正在编辑屏幕上工作。流程如下：TabNavigator中有一个选项卡有一个带有各种标记的MapView。然后，用户可以选择标记以查看关于标记的信息。按下标记后，用户可以更改标记的位置，然后一旦他们更改了标记的位置，他们就更新了api上的位置我想将它们带回所有标记的地图视图。目前，后退选项会将它们带到可以再次更改标记位置的情况。

我的导航设置如下：

＆＃13;

StackNavigator:
  MainTabNavigator,
  HomeScreen,
  InformationScreen
  //OtherScreens.
  
MainTabNavigator:
  Home: {
    screen: HomeScreen
  }
  //Other tabs

＆＃13;

在主屏幕的渲染方法中，我有类似的东西：

＆＃13;

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

＆＃13;

editing道具由我的redux状态管理。

在信息屏幕中，我有以下代码来更新标记的位置，然后重置状态。

＆＃13;

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

＆＃13;

现在它似乎在重置堆栈时导航到屏幕，这只是一个糟糕的用户体验，然后在您返回后在HomeScreen上没有响应。我将调查这可能是一个无限循环或其他东西。如果我需要更清楚地解释一下或添加更多代码，请发表评论我会尽力解释。

我目前正在调查关闭所有动画：React Navigation: Navigate Back To Root using NavigationActions.reset, goBack and getStateForAction

只能更新已安装或安装的组件。使用NavigationActions.Reset时

0 个答案: