I'm new to react and I followed the tutorial about integrating existing apps open in the React Native Docs.
private ReactRootView mReactRootView;
.......
Bundle launchOptions = new Bundle();
launchOptions.putBoolean("test", true);
//mReactRootView.startReactApplication(mReactInstanceManager, "ThirdAwesomeComponent", launchOptions);
mReactRootView.startReactApplication(mReactInstanceManager, "ThirdAwesomeComponent", null); // Actual example
Is there a way to read launchOptions in the HelloWorld Component at index.android.js?
Also I have two activities from where I need to call the react native daemon and want to render two different layouts returned by the server.
How can I do that since currently I only have one:
AppRegistry.registerComponent('HelloWorld', () => HelloWorld);
The best way to do is doing something like,
Redirect to App.js from the index page using
AppRegistry.registerComponent("App",()=>App)
This will redirect to app
Then for rendering two different scenes based on server output. You can create a state variable and initialize it to be the default state.
in the render function of you component you can then check the state value and assign the layout as per your necessity.
Use something like
export default Class App extends Component{
constructor(props){
super(props)
this.state{
data1:false,
data2:true,
loaded:false,
}
}
//do all the fetching data to server here
componentWillMount(){
//after fetching the data to server
change the state as
this.setState({
data1:true,
data2:false,
loaded:true
})
}
render({
if(this.state.loaded && this.state.data1){
return(
//layout which you want to return
)
}else if( this.state.loaded && this.state.data2){
return(
//second layout code
)
}else{
return(
//can create a loading spinner here
<Text>Loading.....</Text>
)
}
})
}
Hope this helps
Cheers
Your launching options will be passed to the constructor of your component as props.
Just implement the constructor
constructor(props){
super(props)
// do stuff to pops dictionary
}
Related
hi I try using Getx Controller in flutter. I want my oninit of controller reload and set the new data each time user go two my certain page, but only the first time page reload oninint excute. how can I set onInit reload each time user go to this page?
my onInit code is:
#override
Future<void> onInit() async {
super.onInit();
SharedPreferences sharedPreferences = await SharedPreferences.getInstance();
name = (sharedPreferences.getString('name') ?? '-1').obs;
avatarImage = (sharedPreferences.getString('imageAddress') ?? '-1').obs;
username = sharedPreferences.getString('username') ?? '-1';
file = File(avatarImage.value);
}
Since the controllers aren't named, I will say that we have a ReloadedController which contains the onInit() in your code snippet, and we have the SpecificPageController that belongs to that specific page.
I can think of two solutions that will suit your case:
First sulution: delete the controller and inject it again, to execute the onInit():
class SpecificPageController extends GetxController {
#override
void onInit() {
Get.delete<ReloadedController>();
Get.put(ReloadedController());
super.onInit();
}
}
This will delete the ReloadedController from the memory, then inject it again, this will trigger the OnInit() to execute since we just injected it.
Second solution: forcefully execute the onInit() method:
class SpecificPageController extends GetxController {
#override
void onInit() {
Get.find<ReloadedController>().onInit();
super.onInit();
}
}
This will execute forcefully the OnInit() method, which will behave like a reload for your onInit() code every time the specific page will be opened.
Third, solution: using onGenerateRoute
return GetMaterialApp(
onGenerateRoute: (settings) {
if (settings.name == "/yourSpecificPageRoure") {
name = (sharedPreferences.getString('name') ?? '-1').obs;
avatarImage =
(sharedPreferences.getString('imageAddress') ?? '-1').obs;
username = sharedPreferences.getString('username') ?? '-1';
file = File(avatarImage.value);
}
},
// ...
Change /yourSpecificPageRoure with your route path name.
This method is called every time a route is generated in your app, the price of your code will be executed only when the route name is /yourSpecificPageRoure.
Hi I want to call a number which is saved in another page.
I don't know how to explain this well but I put some captures, and the code that I'm trying to use, I just only want to catch the value of the number and put into the button to call.
I'm using ionic framework and angular. I'm very new at this but I want to create an app and I'm stuck with this.
Sorry for my english is not my native language.
Client Detail
Call button
Button page .ts
Detail html page(the first image)
button page html (click) function
import { ICompanyAddress } from './../interfaces/Map';
import { Injectable } from '#angular/core';
#Injectable({
providedIn: 'root'
})
export class SharedDataService {
_phoneNumber: string;
constructor() { }
get phoneNumber(): string {
return this._phoneNumber;
}
set phoneNumber(newValue: string) {
this._phoneNumber = newValue;
}
}
Now You could change access its data from any page and changing its value:
example1 (change phoneNumber from a page)
constructor(private sharedDataService : SharedDataService) {
this.changePhoneNumber()
}
changePhoneNumber(){
this.sharedDataService.phoneNumber = '12345678'
}
example1 (get last phoneNumber changed value in a page)
constructor(private sharedDataService : SharedDataService) {
console.log(this.sharedDataService.phoneNumber)// 12345678
}
For that, you can create services and then store your PhoneNumber in services.
Check this out .I hope it will help you.
I am creating my first React Native App. I am trying to use the navigator object for navigating between different views.
In the below code snippet.
The openRecipe method written works perfectly but the goBack method throws an exception saying
undefined is not an object(evaluating this.props.navigator)
I haven't added any props to the Component Class, which I initially thought to be a problem, but since the OpenRecipe method works fine, I am confused on why goBack is throwing on exception which has the same method body as the openRecipe method.
If there were an issue with not including dependencies then it should have been consistent across both the methods.
Once it is sorted out,I am planning to use this.props.navigator.pop() to go back to the previous page.
openRecipe(data){
this.props.navigator.push({
id: 'RecipePage',
name: 'Recipe',
});
}
goBack(){
Alert.alert(
"Here Back!",
)
this.props.navigator.push({
id: 'RecipePage',
name: 'Recipe',
});
}
render() {
return (
<View style={styles.container}>
<View style={styles.row}>
<Text style={styles.title}>Recipe</Text>
<TouchableHighlight onPress={this.goBack}>
<Text style={styles.title} >BACK</Text>
</TouchableHighlight>
</View>
<ListView
dataSource={this.state.dataSource}
renderRow={(data) =>
<TouchableHighlight onPress={() => this.openRecipe(data)}>
<View style={styles.article_container} >
<Text style={styles.article_title} >{data.title}</Text>
<Image style={styles.article_img}
source={{uri: data.image_link}}
/>
</View>
</TouchableHighlight>
}
/>
</View>
);
If your component is implemented as an ES6 class, the goBack method is not automatically bound to the this instance of your object, which React.createClass does automatically. The solution is to either pass in a "fat arrow" lambda as the onPress prop (e.g onPress={() => this.goBack()}), which will bind this to the value it has where the lambda is defined, or to bind it explicitly with onPress={this.goBack.bind(this)}
To elaborate, now that I'm not on a phone keyboard...
In javascript, the value of this depends on the context in which a function (or method) is called, not where it's defined. When a function is a property of an object (a method), and it's invoked as such, this has the value you probably expect; it's the parent object that contains the method.
const person = {
name: 'Shaurya',
sayHello() {
return "Hi " + this.name
}
}
person.sayHello() // -> "Hi Shaurya"
But if I store the sayHello function in a variable and call it from "outside" the object's context, the value of this will depend on where you're calling the function from. If you're running at the global scope (e.g inside a global function, or at a node repl), this will be the global object (where language builtins like Math live). Unless that happens to have a name property, you'll get undefined for this.name:
let sayHi = person.sayHello
sayHi() // -> "Hi undefined"
You can use the .apply method of the Function type to set the value of this to something else temporarily:
sayHi.apply(person) // -> "Hi Shaurya"
sayHi.apply({name: "Yusef"}) // -> "Hi Yusef"
sayHi() // -> still "Hi undefined"
Or, you can use .bind to set the value of this and make it persist:
var sayHiToPerson = person.sayHello.bind(person)
sayHiToPerson() // -> "Hi Shaurya"
The "fat arrow" lambdas introduced in ES6 capture the value of this, and no matter where you invoke it, this will have the same value as it did when the lambda was defined. That's why your second onPress handler works but the first one doesn't. Inside the body of () => this.openRecipe(data), this gets bound automatically to the value it had inside the .render method. But when you just pass this.goBack you lose that context, and this has a different value when the function is invoked by the event handling system.
I am making App framework in React Native. Framework consist of some basic screens like login screen, Tab screen. The purpose of the framework is to provide fundamental design to new app which will be developed from grounds up.
Tab Screen
As we know each Tab will have individual view to display. I want to make tabscreen totally customizable. It means based on passed View list and tab list, it should render.
For that i need to pass Array of View/Component as a prop to TabScreen.
How can I make array of View/Component?
How to pass array as props to TabScreen?
below is the code of TabScreen
'uses strict'
import {StyleSheet, View, Text, Image} from 'react-native';
import React, {Component, PropTypes} from 'react';
import {IndicatorViewPager, PagerTabIndicator} from 'rn-viewpager';
export default class TabScreen extends Component {
constructor (props) {
super(props)
}
static propTypes = {
views : PropTypes.arrayOf(PropTypes.instanceOf(View)).isRequired,
tabs: PropTypes.arrayOf(PropTypes.shape({
text: PropTypes.string,
iconSource: Image.propTypes.source,
selectedIconSource: Image.propTypes.source
})).isRequired,
}
render() {
return (
<View style={{flex:1}}>
<IndicatorViewPager
style={{flex:1, paddingTop:20, backgroundColor:'white'}}
indicator={<PagerTabIndicator tabs={this.props.tabs} />}>
{views}
</IndicatorViewPager>
</View>
);
}
}
module.exports = TabScreen;
Please help
You don't need to pass an array of react native components, you have to use the children of the component, like this:
In the render method of your upper-level component:
<TabScreen>
<View><Text>First tab</Text>
<View><Text>Second tab</Text></View>
{/* And so on... */}
</TabScreen>
Then, in your TabScreen component, just do:
render() {
return (
<View style={{flex:1}}>
<IndicatorViewPager
style={{flex:1, paddingTop:20, backgroundColor:'white'}}
indicator={<PagerTabIndicator tabs={this.props.tabs} />}>
{this.props.children}
</IndicatorViewPager>
</View>
);
}
In any case, in response to your questions:
How can I make array of View/Component?
Just as any other array. For instance, with a map:
let elements = ['First Tab', 'Second Tab'].map((text)=> <View><Text>{text}</Text></View>))
How to pass array as props to TabScreen?
Arrays are no different to any other data type when it comes to props (any variable can be passed as a prop, unless it has some sort of validation mechanism, in which case it will raise a warning).
I'm new in SAPUI5 development and I'd like to know how can I navigate through different apps definitions.
In my case, I'm developing a mobile app that uses the sap.m.App and in some views I'd like to use sap.m.splitApp.
First, I have a login page and a tile container with some options. Depending on the user's choice, I'm showing an splitApp with master and detail page.
Main App Controller: With this method I can navigate to my splitApp view
toApp: function (pageId, context) {
var app = this.getView().app;
// load page on demand
var master = ("Login" === pageId);
if (app.getPage(pageId, master) === null) {
var page = sap.ui.view({
id : pageId,
viewName : "view." + pageId,
type : "JS",
viewData : { component : this }
});
page.getController().nav = this;
app.addPage(page, true);
console.log("app controller > loaded page: " + pageId);
}
// show the page
app.to(pageId);
// set data context on the page
if (context) {
var page = app.getPage(pageId);
page.setBindingContext(context);
}
},
Ticket.view.js: Here I add my master and detail pages to my App
createContent : function(oController) {
// to avoid scroll bars on desktop the root view must be set to block display
this.setDisplayBlock(true);
// create app
this.app = new sap.m.SplitApp();
// load the master page
var master = sap.ui.xmlview("MyTicketsList", "view.MyTicketsList");
master.getController().nav = this.getController();
this.app.addPage(master, true);
// load the empty page
var empty = sap.ui.xmlview("Empty", "view.Empty");
this.app.addPage(empty, false);
return this.app;
}
And it's working fine. I can navigate to my splitApp. The problem is that I have to go back to my Main page (with the tile container) in case the user choice other option. I hope to do that using the following method in my Ticket.controller.js
back : function (pageId) {
this.getView().app.backToPage(pageId);
}
And, on the MyTicketsList controller, I did the handleNavButtonPress using:
this.nav.back("MainPage");
But this, doesn't work!
How can I navigate through apps? Or, perhaps, How is the better way to create my splitter pages view, with Master and Detail pages?
P.S.: I'm following this tutorial
Thanks in advance!
In the splitApp first you should instantiate the view as
oSplitApp.addDetailPage(your view);
then to navigate from the splitapp use,
oSplitApp.toDetailPage(your view);
It's easier than it appears.
I had the same problem and to make the SplitApp preview you just have to call the view like a normal XML view but Insert the TAG
onInit: function() {
this.bus = sap.ui.component(sap.ui.core.Component.getOwnerIdFor(this.getView())).getEventBus();
},
doNavBack: function(event) {
this.bus.publish("nav", "to", {id : "Page1"});
},