2
I came across a very annoying error when trying to install Flux Router in my app6 folder some suggestion:
Note: I’ve already installed two libraries:
npm install --save Eslint-config-rallycoding npm install --save
React-Native-router-Flux
code: index.android.js
import React, { Component } from 'react';
import { AppRegistry } from 'react-native';
import { Router, Scene } from 'react-native-router-flux';
import Principal from './src/components/Principal';
import SobreJogo from './src/components/SobreJogo';
import OutrosJogos from './src/components/OutrosJogos';
export default class app extends Component {
render() {
return (
<Router sceneStyle={{ paddingTop: 50 }}>
<Scene key='principal' component={Principal} initil title="Cara ou coroa" />
<Scene key='sobrejogo' component={SobreJogo} title="Sobre o Jogo" />
<Scene key='outrosjogos' component={OutrosJogos} title="Outros Jogos" />
</Router>
);
}
}
AppRegistry.registerComponent('app', () => app);
LEADING
import React, { Component } from 'react';
import {
StyleSheet,
View,
Image,
TouchableHighlight
} from 'react-native';
import { Actions } from 'react-native-router-flux';
const logo = require('../imgs/logo.png');
const btnJogar = require('../imgs/botao_jogar.png');
const btnSobreJogo = require('../imgs/sobre_jogo.png');
const btnOutrosJogos = require('../imgs/outros_jogos.png');
export default class Principal extends Component {
render() {
return (
<View style={styles.cenaPrincipal}>
<View style={styles.apresentacaoJogo}>
<Image source={logo} />
<Image source={btnJogar} />
</View>
<View style={styles.rodape}>
<TouchableHighlight
onPress={() => { Actions.sobrejogo(); }}
>
<Image source={btnSobreJogo} />
</TouchableHighlight>
<TouchableHighlight
onPress={() => { Actions.outrosjogos(); }}
>
<Image source={btnOutrosJogos} />
</TouchableHighlight>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
cenaPrincipal: {
flex: 1,
backgroundColor: '#61BD8C'
},
apresentacaoJogo: {
flex: 10,
justifyContent: 'center',
alignItems: 'center'
},
rodape: {
flex: 1,
flexDirection: 'row',
justifyContent: 'space-between'
}
});
GAME CODE
import React, { Component } from 'react';
import { Text } from 'react-native';
export default class SobreJogo extends Component {
render() {
return (
<Text style={{ flex: 1, backgroundColor: '#61BD8C' }}>
Aqui podem ser apresentadas informações sobre o jogo
</Text>
);
}
}
CODE Othersgames
import React, { Component } from 'react';
import { Text } from 'react-native';
export default class OutrosJogos extends Component {
render() {
return (
<Text style={{ flex: 1, backgroundColor: '#61BD8C' }}>
Aqui podem ser apresentadas informações sobre outros jogos do desenvolvedor
</Text>
);
}
}
DOWNLOAD CODE INTO GITHUB
For me the error does not seem to have to do with the router. Have you tried to delete parts of the code one by one until you find the part that gives problem? There also seems to be a JSON error. Are you using this somewhere? And just a hint, you should use
--save-dev
to theeslint-config-rallycoding
, why the same is not necessary for production, only development ("Development").– nbkhope