Error trying to install Router Flux

2

I came across a very annoying error when trying to install Router Flux in the folder of my app6 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);

MAIN

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'
  }
});

CODE ON GAME

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 Other Games

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 NO GITHUB

    
asked by anonymous 03.05.2017 / 21:50

2 answers

0

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

    
06.05.2017 / 01:31
1

It's not really a lib error.

The new version of router-flux has modified the structure to mount the routing system.

The good news is that it is very easy to solve this problem.

Simply 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 have helped.

Att,

Júlio Falbo

    
27.08.2017 / 17:36