Error trying to install Flux Router

Asked

Viewed 284 times

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

inserir a descrição da imagem aqui

inserir a descrição da imagem aqui

  • 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 the eslint-config-rallycoding, why the same is not necessary for production, only development ("Development").

2 answers

1

Actually it is not a mistake of lib.

The new version of the router-Flux slightly modified the structure to mount its route system.

The good news is it’s very quiet to solve this problem.

Just encapsulate the Scene components inside another Scene without the Component attribute, see example below:

<Router>    
     <Scene key='app'>
          <Scene key='principal' component={Principal} title='Cara ou Coroa?' titleStyle={styles.nav} />
          <Scene key='sobrejogo' component={SobreJogo} title='Sobre o Jogo' titleStyle={styles.nav} />
         <Scene key='outrosjogos' component={OutrosJogos} title='Outros Jogos' titleStyle={styles.nav} />    
         <Scene key='resultado' component={Resultado} title='Resultado' titleStyle={styles.nav} />
    </Scene>
</Router>

I hope I’ve helped.

Att,

Júlio Falbo

0


This is a problem with the latest version of Flux Router. Uninstall and use the [email protected] version until they repair.

Browser other questions tagged

You are not signed in. Login or sign up in order to post.