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")
Related
I need to make a simple function that load webpage when open the app,
something like that
onLoad(https://reactnative.dev)
(not sure is that correct, but for example).
Can someone help with an example how can that be done?
this library help you
npm i react-native-webview
import React, { Component } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { WebView } from 'react-native-webview';
// ...
class MyWebComponent extends Component {
render() {
return <WebView source={{ uri: 'https://reactnative.dev/' }} />;
}
}
Here's the screen:
import React from 'react';
import { View, StyleSheet, Image, TouchableOpacity, Text } from 'react-native';
import { NavigationActions } from 'react-navigation'
export default class ContentScreen extends React.Component {
render() {
const { state } = this.props.navigation;
const { code } = state.params.code
return(
<Text>CONTENT GOES HERE: {JSON.stringify(state)} / '{code}'</Text>
)
}
}
And the navigation invocation:
<TouchableOpacity key={k} onPress={() => {navigate("Content", {code: k})}} style={styles.listing}>
And here's what's displayed:
CONTENT GOES HERE: {"params":{"code":"222"},"key":"id-151010...","routeName":"Content"} / ''
Which is really #(#$ weird. The value clearly exists at state.params.code, as can be seen by the JSON string, and yet when accessed, it isn't present. Object.values(state.params) and Object.keys(state.params) give the expected results (["code"] and ["222"]).
So, like, any ideas as to what's going on? Or ideas about how to further investigate?
Looks like you are destructuring one level too deep.
const { code } = state.params.code;
This is basically looking for this.props.state.params.code.code
Try:
Const { code } = state.params;
Or:
const { navigation: { state: { params: { code } } } } = this.props;
This is my first go at using MobX so this may be a simpler problem than I imagine, but I'm not getting any errors with the things I've tried; the store is simply undefined wherever I try to use it. I've tried both importing the store directly into components and passing props from the main file (also with , but I'm not sure if I used that right). I've experimented with several different .babelrc file settings as well, but that doesn't seem to be an issue.
Here is the UserStore:
import React from 'react';
import { observable } from 'mobx';
class UserStore {
#observable info = {
username: "bob",
password: "secret",
email: "bob#email.com"
}
}
const userStore = new UserStore()
export default userStore;
Here is a simplified App.js:
import React, { Component } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import Profile from './app/Profile.js';
import { UserStore } from './app/UserStore.js';
export default class App extends Component {
constructor(){
super();
this.state = {
page: 'Profile',
}
}
changePage(){
switch (this.state.page) {
case "Profile":
return <Profile logout={this.logout.bind(this)} userStore={UserStore}/>;
}
}
render() {
return (
<View>
{this.changePage()}
</View>
);
}
}
And here is a simplified Profile.js:
import React, { Component } from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';
import { observer } from 'mobx-react/native';
#observer
export default class Profile extends Component {
render() {
console.log(this.props.userStore);
return (
<View>
<Text>Profile Page</Text>
<Text>username: {props from store go here}</Text>
<Text>password: {props from store go here}</Text>
<Text>email: {props from store go here}</Text>
</View>
);
}
}
All I'm trying to do right now is get the pre-defined observable "info" object from the store to the Profile.js component and display that information. This is being way more difficult than it should be - any insight is greatly appreciated!
Since you declared export default userStore; in UserStore.js
Try changing the way you import in App.js by removing the {}:
import UserStore from './app/UserStore.js';
{} is needed only if you want to do a named import. Here is a good read if you want to know more.
By watching, reading tutorials from variable source, I already known 2 methods that I can override are getInitialState() and render().
I wonder are there any other methods that I can override.
I already searched on Google but I haven't found any official document yet.
Can anybody help me ?
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
Image,
Navigator,
View
} from 'react-native';
var LessonList = React.createClass({
getInitialState: function() {
return {
meow:'MeowMeow',
};
},
render:function(){
return(
<Text>
Keep Calm and Meow On !!!
</Text>
);
}
});
List available in Component Specs in React docs.
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));