Я использую react-native-webview (v9.4.0) в проекте RN (v.61.5) для отображения URL-адреса. Сначала идет полоса по ссылке oauth, затем полоса перенаправляет на URL-адрес по моему выбору.
заметки:
- этот URL-адрес перенаправления отлично работает в моем настольном браузере
- страница не содержит многого, но почти все содержимое страницы генерируется с помощью Javascript
- когда симулятор открывает веб-просмотр, он успешно переходит к URL-адресу, потому что отображается цвет фона тела. (iOS)
- javascript включен в настройках симулятора
- предыдущая версия этого URL-адреса перенаправления работала. я использовал fetch, который немедленно сделал запрос и статически отобразил html-разметку, и он работал без проблем. теперь я немедленно использую вызов jquery ajax и устанавливаю html с помощью JS, и он не работает
веб-просмотр:
<WebView
style={{ height: height, width: width }}
ref={(ref) => (this.webview = ref)}
source={{ uri: this.props.stripe }}
renderError={(error) => <View style={{ flex: 1 }}><Text>{error}</Text></View>}
onError={syntheticEvent => {
const { nativeEvent } = syntheticEvent;
console.warn('WebView error: ', nativeEvent);
}}
onNavigatorStateChange={(event) => {
if (event.url !== this.props.stripeUri) {
this.webview.stopLoading();
Linking.openURL(event.url);
}
}}
javaScriptEnabled={true} //even though this is true by default
/>
URL-адрес перенаправления html:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<style>
body {
background-color: #454C66;
}
.container {
display: grid;
flex-direction: column;
align-items: center;
justify-content: center;
height: 90vh;
}
.wrapper {
display:flex;
flex-direction: column;
align-items: center;
}
#status {
color: #FFFFFF;
font-size: 36px;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<div class="wrapper">
<h1 id="status"></h1>
<!-- Used to display progress -->
<div id="spinner" class="spinner-grow text-light"></div>
</div>
</div>
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Latest compiled Bootstrap JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<script type="text/javascript">
var $j = jQuery.noConflict();
let status = document.getElementById("status");
let spinner = document.getElementById("spinner");
status.innerHTML = 'Connecting...';
const SERVER_URL = "http://localhost:5000/connect";
var STRIPE_USER_ID;
const url = new URL(document.URL)
const urlParams= new URLSearchParams(url.search)
const stripe_code = urlParams.get("code")
if( stripe_code == null ) {
status.innerHTML = "Stripe is not authorized."
spinner.style.display = "none";
} else {
$j.ajax({
url: ERVER_URL + "/complete?code=" + stripe_code,
type: 'GET',
success: function(res) {
console.log("success")
console.log(res)
spinner.style.display = 'none'
status.innerHTML = res.message
},
error: function(jqXHR, textStatus, error) {
console.log("error")
console.log(error)
spinner.style.display = 'none'
status.innerHTML = error
}
})
}
function createForm(msg) {
$("#status").html(msg);
// create form
$("h1").append("<form style='padding-left: 20%; padding-right:20%' id='form' onSubmit='return submitId()'> <div style='margin-top: 30px' class='form-group align-items-center'> <label>Paste the Id from the earlier step:</label> <input name='aflareId' class='form-control' id='some-id' type='text'> </div> <button form='form' onclick='submitId()' formmethod='post' type='button' class='btn btn-danger'>Submit</button> </form> <h5 style='text-align: center; margin-top:10px' id='progress-label'></h5>")
}
function submitId() {
spinner.style.display = "block";
$j.ajax({
url: SERVER_URL + '/link',
type: 'POST',
data: {
docId: $('#some-id').val(),
stripeId: STRIPE_USER_ID
},
success: function(res) {
console.log("success")
console.log(res)
spinner.style.display = 'none'
status.innerHTML = res.message
},
error: function(jqXHR, textStatus, error) {
console.log("error")
console.log(error)
spinner.style.display = 'none'
status.innerHTML = error
}
})
}
</script>
</body>
</html>
Webview работает, но явно есть проблема со стороны JS, учитывая, что первое, что происходит в JS, — это рендеринг двух фрагментов html. Кто-нибудь имел дело с этим раньше?
