Question

我想在Ionic / Angular或React-Native应用程序中实现一些简单的Web浏览功能。浏览功能应该在我的应用程序内部发生，导航栏位于顶部。

我知道使用简单的iframe在理论上是可行的，但是这几乎会在所有页面上导致CORS错误。有任何可行的选择，还是只有真正的nativ Andoird / iOS应用程序才能使用浏览器功能？

非常感谢！吉尔

Answer 1

通过Expo（React Native），您可以使用Web Browser component。

您还应该可以将the in app browser与Ionic一起使用。

Expo Web浏览器（SDK 33）的示例：

public async Task SyncUserClientUpdate(string host, string database, string domain, string contact, Action<string>SyncStatus)
    {
        SyncStatus("Initiating Client Update User Sync");
        SyncStatus("Checking Connection To Server");

        if (CrossConnectivity.Current.IsConnected)
        {
            var db = DependencyService.Get<ISQLiteDB>();
            var conn = db.GetConnection();

            string apifile = "sync-user-client-update-api.php";

            SyncStatus("Checking Data From Local Database");

            var datachanges = conn.QueryAsync<UserTable>("SELECT * FROM tblUser WHERE ContactID = ? AND LastUpdated > LastSync AND Deleted != '1'", contact);
            var changesresultCount = datachanges.Result.Count;

            if (changesresultCount > 0)
            {
                int clientupdate = 1;

                for (int i = 0; i < changesresultCount; i++)
                {
                    SyncStatus("Sending user changes to server " + clientupdate + " out of " + changesresultCount);

                    var uri = new Uri(string.Format("http://" + domain + "/TBSApi/" + apifile + "?Host=" + host + "&Database=" + database, string.Empty));

                    try
                    {
                        var result = datachanges.Result[i];
                        var userid = result.UserID;
                        var usrpassword = result.UsrPassword;
                        var usertypeid = result.UserTypeID;
                        var userstatus = result.UserStatus;
                        var lastsync = DateTime.Parse(current_datetime);
                        var lastupdated = result.LastUpdated;
                        var deleted = result.Deleted;

                        JObject json = new JObject
                        {
                            { "UserID", userid },
                            { "UsrPassword", usrpassword },
                            { "ContactID", contact },
                            { "UserTypeID", usertypeid },
                            { "UserStatus", userstatus },
                            { "LastUpdated", lastupdated },
                            { "Deleted", deleted }
                        };

                        var response = await client.PostAsync(uri, new StringContent(json.ToString(), Encoding.UTF8, contentType));

                        if (response.IsSuccessStatusCode)
                        {
                            var content = await response.Content.ReadAsStringAsync();
                            if (!string.IsNullOrEmpty(content))
                            {
                                var dataresult = JsonConvert.DeserializeObject<List<ServerMessage>>(content, settings);

                                var dataitem = dataresult[0];
                                var datamessage = dataitem.Message;

                                if (datamessage.Equals("Inserted"))
                                {
                                    await conn.QueryAsync<UserTable>("UPDATE tblUsers SET LastSync = ? WHERE ContactID = ?", DateTime.Parse(current_datetime), contact);

                                    clientupdate++;
                                }
                                else
                                {
                                    var retry = await App.Current.MainPage.DisplayAlert("Client Update User Sync Error", "Syncing failed.\n\n Error:\n\n" + datamessage + "\n\n Do you want to retry?", "Yes", "No");

                                    if (retry)
                                    {
                                        await SyncUserClientUpdate(host, database, domain, contact, SyncStatus);
                                    }
                                    else
                                    {
                                        await Application.Current.MainPage.Navigation.PushAsync(new MainMenu(host, database, contact, domain));
                                    }
                                }
                            }
                        }
                        else
                        {
                            var retry = await App.Current.MainPage.DisplayAlert("Client Update User Sync Error", "Syncing failed. Status Code:\n\n" + response.StatusCode, "Yes", "No");

                            if (retry)
                            {
                                await SyncUserClientUpdate(host, database, domain, contact, SyncStatus);
                            }
                            else
                            {
                                await Application.Current.MainPage.Navigation.PushAsync(new MainMenu(host, database, contact, domain));
                            }
                        }
                    }
                    catch (Exception ex)
                    {
                        Crashes.TrackError(ex);
                        var retry = await App.Current.MainPage.DisplayAlert("Client Update User Sync Error", "Syncing failed.\n\n Error:\n\n" + ex.Message, "Yes", "No");

                        if (retry)
                        {
                            await SyncUserClientUpdate(host, database, domain, contact, SyncStatus);
                        }
                        else
                        {
                            await Application.Current.MainPage.Navigation.PushAsync(new MainMenu(host, database, contact, domain));
                        }
                    }
                }

                var logType = "App Log";
                var log = "Sent client updates to the server (<b>User</b>)  <br/>" + "App Version: <b>" + Constants.appversion + "</b><br/> Device ID: <b>" + Constants.deviceID + "</b>";
                int logdeleted = 0;

                await Save_Logs(contact, logType, log, database, logdeleted);
            }
        }
        else
        {
            var retry = await App.Current.MainPage.DisplayAlert("Client Update User Sync Error", "Syncing failed. Please connect to the internet to sync your data. Do you want to retry?", "Yes", "No");

            if (retry)
            {
                await SyncUserClientUpdate(host, database, domain, contact, SyncStatus);
            }
            else
            {
                await Application.Current.MainPage.Navigation.PushAsync(new MainMenu(host, database, contact, domain));
            }
        }
    }

是否可以在Ionic / Angular或React Native中实现简单的浏览器？

1 个答案: