Closed
Description
Me deparei com um erro bem chato ao tentar instalar o Router Flux na pasta do meu app6 alguma sugestão:
Observação: já instalei duas bibliotecas:
- npm install --save eslint-config-rallycoding npm install --save
- react-native-router-flux
Codigo: 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);
PRINCIPAL
`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'
}
});
CODIGO SOBRE JOGO
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>
);
}
}
CODIGO OutrosJogos
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>
);
}
}
