I've got a function, which upload image and I would like to after end this function navigate to next component. In app-routing.module.ts I made a necessary configuration, but I don't know, how to do navigation .
It sounds like you're using angular.
import { RouterExtensions } from 'nativescript-angular/router';
// ...
constructor(private routerEx: RouterExtensions) {
}
yourFunction(): void {
// do your stuff
this.routerEx.navigate(['your route']);
}
Related
Right now I'm integrating custom plugins into the ckeditor 5. I created and added plugins using the ckeditor 5 documentation.
I also have a custom "super" build (similar to this example) that I use in my web application.
Now my problem is that my plugins will not be disabled in the ckeditor read mode (as showcased in the image at the button). The ckeditor documentation mentions that this should be the "default" behaviour for plugins / buttons.
If someone has an idea where I'm going wrong that'd be greatly appreciated!
Here is a skeleton example of my custom plugin class.
import { Plugin } from 'ckeditor5/src/core';
import { ButtonView } from 'ckeditor5/src/ui';
import ckeditor5Icon from './icons/insertvariable.svg';
export default class HWInsertVariable extends Plugin {
static get pluginName() {
return 'HWInsertVariable';
}
init() {
const that = this;
const editor = this.editor;
const model = editor.model;
let labelTxt = 'Variable einfügen';
editor.ui.componentFactory.add( 'hwInsertVariableButton', locale => {
const view = new ButtonView( locale );
view.set( {
label: labelTxt,
icon: ckeditor5Icon,
tooltip: true,
affectsData: true
} );
this.listenTo( view, 'execute', () => {
model.change( writer => {
that.buttonClicked();
} );
editor.editing.view.focus();
} );
return view;
} );
}
buttonClicked() {
//code
}
}
Im not sure what the correct method to resolve this is, as I also am facing the same. But what I have found so far, is that there might be a hacky way to get around this.
Checkout the docs regarding "disabling commands", "read-only" mode, and notice the CSS class "ck-disabled"
if/when I find a working way, I will try to come back here and post a better solution
Update:
I fixed this for me when I found that I was missing the section of the code in my my_plugin_ui.js where
const command = editor.commands.get('nameOfCommand');
// Execute the command when the button is clicked (executed).
buttonView.bind('isOn', 'isEnabled').to(command, 'value', 'isEnabled');
I saw several Stackoverflow questions about this but I still couldn't solve my problem about switching pages.
I import the second Vue page. Then I call this.$navigateTo() on the page I imported. I don't get any errors after executing the method. Nothing happens! The method gets executed but the page doesn't change. The path to the second page is valid.
import SecondPage from './SecondPage';
export default {
methods: {
run(){
console.log('test')
this.$navigateTo(SecondPage)
}
}
}
this is the way I call the method:
<Button text="Check" #tap="run()" />
There is likely an error in the SecondPage.vue file. What you can try is change the $navigateTo call to have a catch statement:
import SecondPage from './SecondPage';
export default {
methods: {
run(){
console.log('test')
this.$navigateTo(SecondPage).catch(err => console.log('There was an error!', err))
}
}
}
See if it gives you a clue what might be wrong.
And just to make sure, SecondPage is indeed a <Page> component? (the root element is the Page?)
Im trying to use Drawer navigation. I have header.js components which has a hamburger icon to open the left navigation menu
//Header.js
import React from 'react';
import { Text, View, Image, TouchableHighlight} from 'react-native';
import { DrawerNavigator } from 'react-navigation';
// Make a component
const Header = (props, {navigate}) => {
const { textStyle, viewStyle, imgstyle } = styles;
return (
<View style={viewStyle}>
<TouchableHighlight onPress={()=> this.props.navigation.navigate('DrawerToggle')}> //here the error is coming
<Image style={{width:40, height:40}}
source={require('./../media/hamburger.png')}
/>
</TouchableHighlight>
<Text style={textStyle}>{props.headerText}</Text>
</View>
);
};
export default Header;
Here is App.js
const MyApp = DrawerNavigator({
Login: {
screen: Login,
},
Signup: {
screen: Signup,
},
});
export default class App extends React.Component {
render() {
return <MyApp />;
}
}
Here is one of the comoponent Login.js
import React, { Component } from 'react';
import {
Text, View, StyleSheet
} from 'react-native';
import Header from './Header';
export default class Login extends Component{
static navigationOptions = {
drawerLabel: 'Login',
};
render(){
return(
<View >
<Header headerText={'Login'}/>
<Text>Login Screen</Text>
</View>
);
}
}
I am not sure what I am missing to fix this. Please check my code.
EDITED:
I tried without "this" to but no luck. I am checking everywhere in the internet but couldn't find the exact solution or I couldn't get a solution to my mind. Can someone who is good with react native respond on this, Please?
The problem is - you use this keyword in a stateless component: this.props.navigation.navigate('DrawerToggle').
Try just props.navigation.navigate('DrawerToggle') since this is not pointing to the Header component instance in your case.
this in a stateless component is "inherited" from the calling scope (since stateless component is an "arrow" function) and likely points to window or global.
I have the following navigation structure in my React Native app:
StackNavigator configured with 3 routes:
Splash screen (React Component)
StackNavigator for my login flow
DrawerNavigator for my core app screens.
The DrawerNavigator has some dynamic multiple routes, but also one static route which is another StackNavigator.
Everything seems to be working as expected:
The store is being updated accordingly.
Navigation between screen works.
Go back between screen works when configured within each component, with the following command:
this.props.navigation.goBack();
My question is - is there a way for me to handle back button on Android globally? Currently when I click on the back button, nothing happens (due to the fact I'm using Redux). Should I handle the back button in each component or is there a way of doing it using Redux?
A bit late, but there is a way to handle this with redux. In your index.js file where you create your store you can make export a class and add a componentWillMount call to handle dispatching a call to your redux actions. Just remember to import the actions you need above.
const store = configureStore();
export default class Index extends Component {
componentWillMount = () => {
BackHandler.addEventListener('hardwareBackPress', () => {
const { nav: { routes } } = store.getState();
const currentRouteName = routes[routes.length-1].routeName;
if (currentRouteName === 'EditCoupleProfile') {
store.dispatch(editCoupleActions.navigateBack())
} else if ( currentRouteName === 'EditInterests' ) {
store.dispatch(interestsActions.navigateBack())
} else {
store.dispatch(popFromStack());
}
return true;
})
};
componentWillUnmount = () => {
BackHandler.removeEventListener('hardwareBackPress');
};
render() {
return (
<Provider store={store}>
<AppWithNavigation />
</Provider>
);
}
}
i've been trying to execute a button that calls a function from a different component.
import ComponentB from './components/ComponentB '
import React, {Component} from 'react';
class ComponentA extends Component {
render() {
return
(
<button onClick={this.handleClick}>click me</button>
);
}
}
export default ComponentA;
this didn't work out. the button wasnt able to call the function. what am i doing wrong?
import React, {
Component
}
from 'react';
class ComponentB extends Component {
constructor() {
this.handleClick = this.handleClick.bind(this);
}
}
handleClick() {
console.log("hi hi hi");
}
}
export
default ComponentB;
You're importing ComponentB, but not using it, that's why is not working. In your case the best way is to implement the handleClick directly to your ComponentA, but this is not what you wanna do. If you're looking to share the same functions with different components, using redux together with react js will get the job done and will provided to the other components as well ;)