I'm trying to implement Fresco in my NS Vue app.
I have this in my main.js
Vue.registerElement('FrescoDrawee', () => require("nativescript-fresco").FrescoDrawee)
var application = require("application");
var fresco = require("nativescript-fresco");
if (application.android) {
application.onLaunch = function (intent) {
fresco.initialize();
};
}
and in home.vue
< FrescoDrawee horizontalAlignment="stretch" height="150" :imageUri="item.avatar" />
this is the error I'm getting. "SimpleDraweeView was not initialized!". I'm pretty sure the way I'm initializing it is wrong. Googling it gives me examples in TS and Angular, and none for nativescript Vue. any help would be greatly appreciated
Mostly TypeScript is again JavaScript if you eliminate the typings from code. It's just the same you will have to follow in irrespective of your flavour (Core / Angular / Vue).
if (application.android) {
application.on("launch", function () {
fresco.initialize();
});
}
Source: https://github.com/NativeScript/nativescript-fresco#how-to-use-nativescript-fresco
Related
I'm working on a project and curious about Alpine JS $dispatch. I'm wondering if code sample no 1 and no 2 are the same or not? If not how do I write $dispatch 'magic' properties provided by Alpine JS in native Javascript?
Code sample 1 (with Alpine JS)
quill.on('text-change', function () {
$dispatch('input', quill.root.innerHTML);
});
Code sample 2 (JavaScript)
quill.on('text-change', function () {
let quillData = quill.root.innerHTML;
let customEvent = new Event('input', {data:quillData});
container.dispatchEvent(customEvent);
});
The Alpine.js $dispatch function uses CustomEvent instead of Event see it here https://github.com/alpinejs/alpine/blob/master/src/component.js#L355
So your vanilla JS sample needs to be:
quill.on('text-change', function () {
let quillData = quill.root.innerHTML;
let customEvent = new CustomEvent('input', {detail:quillData});
container.dispatchEvent(customEvent);
});
I am trying to implement the nativescript-camera-plus plugin to take an image. I am developing an IOS (for iPad) application with NativeScript + vue and am using an emulator to test.
For some reason the photoCapturedEvent event is not been triggered when the takePicture() is called. Furthermore, when { saveToGallery: true } is been passed through this method, the image is not saved to the photo gallery.
The loaded event works and runs as the component is loaded. I am unsure if the errorEvent event gets triggered.
Here is a snippet of my code (in TakePhoto.vue):
<CameraPlus ref="CameraPlus" height="600" id="camPlus"
saveToGallery="true"
showCaptureIcon="true"
showGalleryIcon="false"
showToggleIcon="false"
showFlashIcon="false"
debug="true"
enableVideo="false"
confirmVideo="false"
defaultCamera="front"
#loaded="onCameraLoaded"
#photoCapturedEvent="photoCaptured($event)"
#errorEvent="onCameraError">
</CameraPlus>
And here is the associated methods
onCameraLoaded(result) {
this.cam = result.object;
console.log("Camera loaded...");
},
onButtonCapture() {
console.log('Take Picture');
this.image = this.cam.takePicture({ saveToGallery: true });
},
photoCaptured(args){
console.log("ARGS - ", args)
},
I would also like to mention that I have registered the component in the app.js file like so: Vue.registerElement('CameraPlus', () => require('#nstudio/nativescript-camera-plus').CameraPlus);
Any help would be appreciated.
I´m having a hard time understanding what am i missing here when the user receives a push notification and then hits the button in order to see it and navigate to the proper page inside the app, so my code is this and by the way it works very well in ios:
So if the application is android, i use this code below... i receive the content and pass it to a function called handleOpenURL
if (application.android) {
application.on(application.launchEvent, (args) => {
try {
TnsOneSignal.startInit(application.android.context).setNotificationOpenedHandler(new TnsOneSignal.NotificationOpenedHandler({
// notificationOpened: function (result: com.onesignal.OSNotificationOpenResult) {
notificationOpened: function (result) {
const imovelAndroid = JSON.parse(result.stringify()).notification.payload.additionalData;
handleOpenURL(imovelAndroid);
}
})).init();
TnsOneSignal.setInFocusDisplaying(TnsOneSignal.OSInFocusDisplayOption.Notification);
TnsOneSignal.startInit(application.android.context).init();
}
catch (error) {
console.error('error', error);
}
});
}
I´m actually entering the function below, but the problem is when navigating, it simply does not work:
function handleOpenURL(argImovel) {
const precoToNumber = +argImovel['imovel'].preco;
const precoFormated = Number(precoToNumber).toLocaleString("pt-PT", { minimumFractionDigits: 0 });
const navigationOptions = {
moduleName: "detail/detail-page",
context:{ //my context here which is big so i´m not putting it.
}
};
frameModule.topmost().navigate(navigationOptions);
}
Everything works as expected in ios, it is suppose to receive the push, and when the user hits it, the app should navigate to a detail page where the content receive is showned.
What am i missing? thanks for your time, regards.
EDIT
Thanks to Manoj, i fixed the issue adding this to my handleOpenURL function:
setTimeout(() => {
frameModule.topmost().navigate(navigationOptions);
}, 2);
Make sure your Frame is ready for navigation, try logging frameModule.topmost() and see if that is a valid frame.
May be you could try a timeout of 1 or 2 secs and see whether that fixes the issue.
I've successfully embed an audio streaming into nativescript webview with code below.
getViewById(page,"myWebView").src = "http://live.indostreamserver.com:8054/stream/7/";
The question is how and could it be autoplayed once it loaded?
Try accessing the native widgets and use the native approach.
For example something like this on Android
XML
<WebView loaded="onWebViewLoaded" src="http://live.indostreamserver.com:8054/stream/7/" />
TypeScript
export function onWebViewLoaded(args) {
let webView = <WebView>args.object;
if (isAndroid) {
setTimeout(() => {
let androidWebView = webView.nativeView; // android.webkit.WebView
androidWebView.getSettings().setMediaPlaybackRequiresUserGesture(false);
}, 100);
}
}
I'm using React and React Router, and on some pages, I have some big lists rendered (as sub components) of the pages. When clicking on a link to change the page, it waits for all the subcomponents to be rendered which implies a delay between the click and the visual feedback. Is there a simple way not to wait for some sub components to be rendered?
I'm looking for a best practice, but maybe using a boolean and a setTimeout() is the only way. Thx.
When you have big lists of components, you often don't see all of them at the same time. You can use React Virtualized to actually render only visible components.
Check the code below:
const LightComponent = () => <div>LightComponent</div>
const HeavyComponent = () => <div>HeavyComponent</div>
class App extends React.Component {
constructor(props) {
super();
this.state = { shouldRenderHeavyComponent: false };
}
componentDidMount() {
this.setState({ shouldRenderHeavyComponent: true });
}
render() {
console.log("Render", this.state.shouldRenderHeavyComponent);
return (
<div>
<LightComponent/>
{ this.state.shouldRenderHeavyComponent && <HeavyComponent/> }
</div>
);
}
}
ReactDOM.render(<App/>, document.getElementById('app'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>
I had the same challenges. Finally I discovered this wonderful library, doing the trick for me: https://github.com/seatgeek/react-infinite