I extending base class (Class A) that uses redux and I want to call and override function in base class but it not working. Give me solutions thank you.
Parent Class: https://ibb.co/bNzPRZ6
Child Class: https://ibb.co/vX1xPvq
Result: https://ibb.co/GFYRtQY
Parent Class:
import React, { Component } from 'react';
import { View } from 'react-native';
import { connect } from 'react-redux'
class ClassA extends Component {
showAlertMess(message) {
alert(message)
}
render() {
return (
<View></View>
);
}
}
export default connect()(ClassA)
Child Class:
import React, { Component } from 'react';
import { View } from 'react-native';
import ClassA from './classA';
export default class ClassB extends ClassA {
state = { }
componentDidMount(){
this.showAlertMess("This is class B")
}
render() {
return (
<View></View>
);
}
}
Related
How can I construct container from another containers.
for example:
containerA - responsible for A
containerB - responsible for B
Container C - responsible for A + B with different Style C.
in code:
class ContainerA extends Component{
render() {
return (
<ComponentA/>
)
}
}
class ContainerB extends Component{
render() {
return (
<ComponentB/>
)
}
}
class ContainerC extends Component{
render() {
return (
<ContainerA/>
<ContainerB/>
)
}
}
When you want to group components in React Native, you can use View as such
import React, { Component } from 'react'
import { View } from 'react-native'
import ContainerA from './ContainerA'
import ContainerB from './ContainerB'
class ContainerC extends Component{
render() {
return (
<View style={styles.containerStyle}>
<ContainerA/>
<ContainerB/>
</View>
)
}
}
const styles = {
containerStyle = {
// ...
}
}
I have set up a very simple mobx store class:
import {observable, action} from 'mobx'
class TestStore {
#observable placeholder = 'Search In Me';
#action changeName(name) {
this.placeholder = name;
}
}
export default new TestStore();
My parent class (below) is where the provider is set. The problem is in this class I also need to track the route name of the current tab that is active. That all works fine - my issue is how do I call the changeName function in the store from the parent class? Currently this.props.store.changeName is returned as undefined.
import React, { Component } from 'react';
import { Root, Tabs } from './config/router';
import { Alert,View } from 'react-native';
import { Provider } from 'mobx-react';
import TestStore from './config/TestStore';
import {observer} from "mobx-react/native";
#observer class App extends Component {
_getCurrentRouteName(navState) {
if (navState.hasOwnProperty('index')) {
this._getCurrentRouteName(navState.routes[navState.index])
} else {
if (navState.routeName==='Tab 1') {
Alert.alert('Tab 1')
this.props.store.changeName('Tab 1')
}
if (navState.routeName==='Tab 2') {
Alert.alert('Tab 2')
}
if (navState.routeName==='Tab 3') {
Alert.alert('Tab 3')
}
if (navState.routeName==='Tab 4') {
Alert.alert('Tab 4')
}
}
}
render() {
return (
<Provider store={TestStore}>
<Root onNavigationStateChange={(prevState, newState) => {
this._getCurrentRouteName(newState)
}} />
</Provider>
)
}
}
export default App;
So I resolved this issue restructuring my app and moving everything up a level - index.js became the following and imported the original classes in index.js back in:
import React, { Component } from 'react';
import { Provider } from 'mobx-react';
import TestStore from './config/TestStore';
import Base from './app';
class App extends Component {
render() {
return (
<Provider store={TestStore}>
<Base />
</Provider>
)
}
}
export default App;
Is there a way I can declare mutable global parameters within React Navigation StackNavigator? I'm trying to achieve a central point of reference for global variables in the app.
Suppose this is my index.android.js :
import {
AppRegistry
} from 'react-native';
import { StackNavigator } from 'react-navigation';
import {MainScreen} from './components/mainScreen';
import {SegundoScreen} from './components/segundoScreen';
import {TerceraScreen} from './components/terceraScreen';
const SampleAppStack = StackNavigator(
{
Home : { screen : MainScreen },
SegundoScreen : { screen : SegundoScreen },
TerceraScreen : { screen : TerceraScreen }
},
{
headerMode: 'none'
},
{
appGlobalVariables: {
Session : '',
variable1 : 'cool',
variable2 : 'coolant',
variable3 : 'color',
variable4 : 'none',
objetoUno : {},
objetoDos : {},
objetoTres : {}
}
}
);
AppRegistry.registerComponent('SampleApplication', () => SampleAppStack);
Then in directory components/mainScreen.js, I supposedly have...
import React, { Component } from 'react';
import {Text,View} from 'react-native';
import { StackNavigator } from 'react-navigation';
class MainScreen extends Component {
constructor(props) {
super(props);
this.state = {dummyProp:'dummyProp'};
}
render() {
var {appGlobalVariables} = this.props.StackNavigator;
return (
<View>
<Text>Received from App's global variables: {appGlobalVariables.variable1}</Text>
</View>
);
}
}
export {MainScreen}
And in directory components/segundoScreen.js, I supposedly have...
import React, { Component } from 'react';
import {Text,View} from 'react-native';
import { StackNavigator } from 'react-navigation';
class SegundoScreen extends Component {
constructor(props) {
super(props);
this.state = {dummyProp:'dummyProp'};
}
render() {
var {appGlobalVariables} = this.props.StackNavigator;
return (
<View>
<Text>Received from App's global variables: {appGlobalVariables.variable2}</Text>
</View>
);
}
}
export {SegundoScreen}
And in directory components/terceraScreen.js, I supposedly have...
import React, { Component } from 'react';
import {Text,View} from 'react-native';
import { StackNavigator } from 'react-navigation';
class TerceraScreen extends Component {
constructor(props) {
super(props);
this.state = {dummyProp:'dummyProp'};
}
render() {
var {appGlobalVariables} = this.props.StackNavigator;
return (
<View>
<Text>Received from App's global variables: {appGlobalVariables.variable3}</Text>
</View>
);
}
}
export {TerceraScreen}
I've tried it, but it is not working.
An option would be to use global like mentioned here https://stackoverflow.com/a/36994650/4805414. Also see accepted answer to the belonging question. Maybe that's an alternative for you, too.
code below is mine.
and I am using atom, genie motion.
it saids Duplicate declaration "MyScene" at ~ \index.android.js:20:7
import React, { Component } from 'react';
import { AppRegistry, ListView, Text, View } from 'react-native';
export default class MyScene extends Component {
getDefaultProps() {
return {
title: 'MyScene'
};
}
render() {
return (
<View>
<Text>Hi! My name is {this.props.title}.</Text>
</View>
)
}
}
//import MyScene from './MyScene';
class YoDawgApp extends Component {
render() {
return (
<MyScene />
)
}
}
AppRegistry.registerComponent('YoDawgApp', () => YoDawgApp);
It seems that the packager is still looking at your commented out import statement. That seems wrong to me but a quick fix is either:
Remove the commented out code
Change "MyScene" in that commented out code to literally anything else (other then "YoDawgApp")
I'm using below lib to implement a callback (onSuccess, onError) for every ApiRequest. But I have a problem when update state when event is trigged. I tried to remove all stuffs just keep the base logic. I don't know why it error.
Lib: https://www.npmjs.com/package/react-native-simple-events
Below is my code
ApiRequest.js
import Events from 'react-native-simple-events';
export function login(email, password) {
Events.trigger('LoginSuccess', 'response');
}
Login.js
import React, { Component, } from 'react'
import {
View,
Text,
} from 'react-native'
import Events from 'react-native-simple-events';
import * as request from '../../network/ApiRequest'
class LoginScreen extends Component {
static propTypes = {}
static defaultProps = {}
constructor(props) {
super(props)
this.state = {
status: "new"
}
}
componentDidMount() {
Events.on('LoginSuccess', 'myID', this.onLoginSuccess);
request.login("abc","def")
}
componentWillUnmount() {
Events.rm('LoginSuccess', 'myID');
}
onLoginSuccess(data){
this.setState({ //=>error here
status : "done"
});
}
render() {
return (
<View>
<Text>
{this.state.status}
</Text>
</View>
)
}
}
let me know if you need more information
You need to bind this on the onLoginSuccess method:
Events.on('LoginSuccess', 'myID', this.onLoginSuccess.bind(this));