I have my StackNavigator set up like this:
const Navigation = StackNavigator({
Splash:{screen: Splash},
Registration:{screen:Registration},
HomeScreen:{screen: HomeScreen},
Login:{screen: Login},
Lobby:{screen: Lobby},
Wifi:{screen: Wifi},
Mobile:{screen:Mobile},
}, {
mode: 'modal',
headerMode: 'none'
});
I'd like to redirect the user from the Splash page(which only contains a logo) to the Registration page after 2 seconds. I want to avoid using buttons(hence the automatic redirect) so that the user gets a brief look at the logo.
My Splash page:
import React,{Component} from 'react'
import {View, Text, Image, StyleSheet} from 'react-native'
import config from '../components/config/index';
import { StackNavigator, DrawerNavigator } from 'react-navigation';
export default class Splash extends Component{
render(){
const logo = config.images.logo;
const {navigate} = this.props.navigation;
return(
<View style={styles.mainContainer}>
<Image
source={logo}
style={styles.logo}
/>
</View>
);
}
}
I'm not sure I would put this.navigator.redirect('Registration') because the only way I've changed pages so far was using onPress={}
try with componentDidMount function.
import React,{Component} from 'react'
import {View, Text, Image, StyleSheet} from 'react-native'
import config from '../components/config/index';
import { StackNavigator, NavigationActions, DrawerNavigator } from 'react-navigation';
const EntityAction = NavigationActions.reset({
index: 0,
actions: [
NavigationActions.navigate({ routeName: 'screen:Registration' }),
]
});
export default class Splash extends Component{
componentDidMount {
setTimeout( () => {this.load()}, 2000);
}
load = () => {
this.props.navigation.dispatch(EntityAction);
}
render(){
const logo = config.images.logo;
const {navigate} = this.props.navigation;
return(
<View style={styles.mainContainer}>
<Image
source={logo}
style={styles.logo}
/>
</View>
);
}
}
Related
Has anyone been able to use the React Leaflet Popup element to show a popup on mouseover rather than on click?
I can't seem to find a way to achieve this.
I've recently solved this problem using React Refs and the Leaflet API.
A barebones example:
import React, { Component } from 'react';
import { Circle } from 'react-leaflet';
class Foo extends Component {
render() {
const { center, radius } = this.props;
return (
<Circle
ref={circle => { this.circle = circle; }}
center={center}
radius={radius}
onMouseOver={() => {
this.circle.leafletElement.bindPopup('foo').openPopup();
}}/>
);
}
}
export default Foo;
In my ionic2 application, I have a textbox , now i am submitting the form without add any value in that textbox , at that time i have give an alert that 'the textbox can not be empty'.
now when alert get close focus should be in same texbox.
import {Component, Input, ViewChild} from '#angular/core';
import {NavController} from 'ionic-angular';
#Component({
templateUrl: 'build/pages/home/home.html'
})
export class HomePage {
#ViewChild('input') myInput ;
constructor(private navCtrl: NavController) { }
ionViewLoaded() {
setTimeout(() => {
this.myInput.setFocus();
},150);
}
}
1) import "Input", "ViewChild" and "NavController"
import {Component, Input, ViewChild} from '#angular/core';
import {NavController} from 'ionic-angular';
2) Create a reference to your input in your template :
<ion-input #input>
#ViewChild('input') myInput ;
3) Trigger the focus
ionViewLoaded() {
setTimeout(() => {
this.myInput.setFocus();
},150);
}
4) Show the keyboard
add this line to your config.xml :
<preference name="KeyboardDisplayRequiresUserAction" value="false" />
Ionic 2 seems very different from 1. I used the starter project and those are my files:
Tabs.html
<ion-tabs>
<ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="home"></ion-tab>
</ion-tabs>
Tabs.ts
import { Component } from '#angular/core';
import { SigninPage } from '../Auth/Signin/Signin';
#Component({
templateUrl: 'Tabs.html'
})
export class TabsPage {
tab1Root: any = SigninPage;
constructor() {
}
}
app.components.ts
import { Component } from '#angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar } from 'ionic-native';
import { TabsPage } from '../pages/Tabs/Tabs';
#Component({
template: `<ion-nav [root]="rootPage"></ion-nav>`
})
export class MyApp {
rootPage = TabsPage;
constructor(platform: Platform) {
platform.ready().then(() => {
StatusBar.styleDefault();
});
}
}
Is there any way to show a different tab with an if condition? For example, I want to show Tabs.App.html or Tabs.Auth.html depending on an if block.
What is the best way to do it with Ionic 2?
In ionic2 every page is accompanied by it's .ts file. So if you want 2 tabs, app.html and auth.html you would need to create both these pages and their .ts file.
In that way you can write an if-statement saying:
if(1 > 2){
this.rootpage = AuthTab;
}else{
this.rootpage = AppTab;
}
ps don't forget to import your components
I have a problem with customizing the datepicker popup dialog(For example change color of header). I can't style it by attribute style like textField by textFieldStyle. It doesn't have any class or id.
How can I do it?
The only place you can currently override this is the theme:
import React from 'react';
import {cyan500} from 'material-ui/styles/colors';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import MyAppRoot from './MyAppRoot';
const muiTheme = getMuiTheme({
datePicker: {
selectColor: cyan500,
},
});
class Main extends React.Component {
render() {
return (
<MuiThemeProvider muiTheme={muiTheme}>
<MyAppRoot />
</MuiThemeProvider>
);
}
}
export default Main;
If you are using the latest version of Material-UI, things changed. MuiThemeProvider and getMuiTheme are replaced by createMuiTheme and ThemeProvider respectively.
You can use like this:
import { createMuiTheme, ThemeProvider } from '#material-ui/core/styles';
Now Material-UI is using tree-shaking mechanism to avoid unnecessary bundles, so destructing is well to go.
To change the header, use something like this:
const muiTheme = createMuiTheme({
overrides: {
MuiPickersToolbar: {
toolbar: { backgroundColor: 'var(--themeP)' }
},
...
I am new to CycleJS and I would like to subscribe 'click' events of a child component from its parent component; but, it's not working. I'm able to subscribe events inside the child component. Is it possible to subscribe events of a child component from its parent component? If it's possible, how can I do it? Here's the parent component:
import Rx from 'rx';
import Cycle from '#cycle/core';
import CycleDOM from '#cycle/dom';
import isolate from '#cycle/isolate';
import _ from 'underscore';
import Inboxmails from './../components/inboxmails';
const {div} = CycleDOM;
const Main = (sources) => {
const inboxmails=Inboxmails({DOM: sources.DOM});
sources.DOM.select('#inbox_1')
.events('click')
.do(event => event.preventDefault())
.subscribe(event => {
console.log(event);
});
const vtree$ = Rx.Observable.of(
div('.wrapper', [
inboxmails.DOM
]));
return {
DOM: vtree$
};
};
export default (sources) => isolate(Main)(sources);
And this is the child component
import Rx from 'rx';
import Cycle from '#cycle/core';
import CycleDOM from '#cycle/dom';
import isolate from '#cycle/isolate';
const { div} = CycleDOM;
const Inboxmails = function (sources) {
const inboxmails$ = Rx.Observable.of(div([
div("#inbox_1",[
"Click here"
])])
);
return {
DOM: inboxmails$
};
};
export default (sources) => isolate(Inboxmails)(sources);
Have the child return a sink of events that the parent needs.
const Inboxmails = function (sources) {
const inboxmails$ = Rx.Observable.of(div([
div("#inbox_1",[
"Click here"
])])
);
return {
DOM: inboxmails$,
clicks: sources.DOM.select('#inbox_1').events('click')
};
};
Then the parent can use inboxmails.clicks.
However, in Cycle.js there should never be any subscribe in your code (unless it's for debugging). Subscribe calls should only be in drivers.