I'm trying to create a hybrid react native app to host my website's content in webviews. Something like this: Supreme App
One thing I want to achieve is: when a <a href> link is clicked on my website, instead of webview just show the new link's content, I want the app to push a new page and show the new link content in the new page, so that I can maintain a good page backstack and it feels more like native app (for each navigation, there's a new page for it).
I'm wondering how I can detect link click, push a new page instead of let the webview do default link navigation. Thanks!
You can use WebView prop onNavigationStateChange to detect the change in url.
On clicking <a> the webview will redirect, the onNavigationStateChange will fire. You can use this callback to push a new screen in the app.
Eg.
<WebView
ref={r => this.webview = r}
style = {{marginTop : 0}}
onNavigationStateChange={this._onNavigationStateChange}
source = {{uri: 'https://www.your-url.com' }}
/>
_onNavigationStateChange=(webViewState)=>{
let newUrl = webViewState.url
/*Your navigation logic*/
}
Reference
Related
I have a button on the homepage of my application:
<ion-button href="/start" class="btn" color="danger">start</ion-button>
However, I noticed it actually reloads the page when clicked.
I also have ionic tabs (https://ionicframework.com/docs/api/tabs), and when a tab is clicked a component is loaded instantly.
How can I achieve the same functionality for ion-button?
The tab component has an integration with the router, which allows the tab to function as a vue-router link. ion-button doesn't seem to have the same integration. The documentation for the href prop states:
Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered.
Using href makes the button function as a regular browser link which will cause the page to reload. Instead, you can wrap the ion-button in a router-link tag or call $router.push in the button's click event.
I am new to nextjs and I am building my first website. My links are rendered with the following:
const menuList = menu.map(function(menuItem: any){
return <Link href={`${menuItem.slug}`} key={menuItem.slug} as={`${menuItem.slug}`}>{menuItem.title}</Link>;
});
I have an index.tsx and [slug].tsx
When I click on a link it doesn't reload the entire page but the blue menu and image flashe white. I was expecting just the 'I made it to about us' content to change and the image and menu would not appear to change. Am I missing something or is this expected? If I hit the back button I get the results I expect. I read to use 'as' on Link but that doesn't seem to help. Any suggestions?
Need to display html page content in react native app and also need to implement a text search on the html page content, please advise
in HTML: I added a text box and search button on top of the html page in a floating div and added text searching js function in the tag
React Native App: added react native html viewer library to load the html page content in the webview
HTML text contents are showing but the text input box and search button are not showing, also js functions are not executing
You can use react native web view and load the html page with it.
You should enable java script by changing the web view props:
render() {
return (
<WebView
source={{uri: 'https://example.example.com'}}
javascriptenabled={true} />
);
}
For more details - https://facebook.github.io/react-native/docs/webview
I am developing a React Native app. It is a very simple app. I just have to load a website on a webview, which is perfectly done. but my client wants something which I am not sure how to do.
There are some social media buttons on the website. like facebook, twitter etc. so my client wants me to open social media app while user tap on them. suppose user tapped on facebook button then the facebook app will load.
I badly need to know the solution. please help me. thanks in advance.
Make use of onMessage.
Code is untested but you should get the gist of what it's trying to achieve.
Webpage:
function facebookClick() {
window.postMessage("Facebook button done got clicked");
}
var _fb_button = document.getElementById("your-facebook-button");
_fb_button.addEventListener("click", facebookClick, false);
WebView:
[...]
import { Linking } from 'react-native';
[...]
<WebView
onMessage={(event) => {
let message = event.nativeEvent.data;
if(message.includes("Facebook button done got clicked"))
Linking.openURL('fb://page/PAGE_ID');
}}
[...]
You'll have to check out the current protocol's details of each of the social apps you're trying to open via deeplink. Once you've done that, you can further improve your code with Linking.canOpenURL
I have a webview with HTML contents. And I have few links in that HTML content. when i clicked the link,corresponding webpage opens within my application. Can i open the webpage in mobile browser when i clicked a particular link?
I have tried using target="_blank" property within anchor tag,which doesn't works.
and also i have used "openURL" webview property, but fireEvent is not working properly.
my main js file;
var mywebview = Ti.UI.createWebview({
height : 'auto',
width : '100%',
html : '<!DOCTYPE html><html><body>Visit W3Schools.com!<br>Visit Google.com!</body></html>',
)};
In app.js;
Ti.App.addEventListener("openLink", function(e){
alert(e.linkUrl);
Ti.Platform.openURL(e.linkUrl);
});
Ti.App.fireEvent works for me in this form:
youatnotes.com
and in app.js:
Ti.App.addEventListener('ynOpenURL', function(e) {
Ti.Platform.openURL(e.url);
});
You could the URL of the webview in the event in order to open the link inside the WebView.