2017-03-22 1 views
0

Ma première tentative d'une sorte d'application utilisant natif. J'utilise la base native pour les composants/style. J'ai réussi à obtenir une page très basique mais j'essaie de comprendre comment je passe de cette page à une page qui se déplace vers des pages différentes lorsque l'on clique à partir du pied de page.Application de plusieurs pages - réagit natif avec la base native

import React, { Component } from 'react'; 
import { Navigator, Container, Content, Header, Title, Button, Left, Right, Body, Icon, Footer, FooterTab } from 'native-base'; 
import { Col, Row, Grid } from 'react-native-easy-grid'; 

import { 
    AppRegistry, 
    StyleSheet, 
    Text, 
    View 
} from 'react-native'; 

export default class AwesomeNativeBase extends Component { 
    render() { 
    return (
     <Container> 
      <Header>   
       <Body> 
        <Title>Kays Hairdressing</Title> 
       </Body> 
      </Header> 
      <Content> 
      <Grid> 
       <Col style={{ backgroundColor: '#635DB7', height: 550 }}></Col> 
       <Col style={{ backgroundColor: '#00CE9F', height: 550 }}></Col> 
      </Grid> 
      </Content> 
      <Footer> 
      <FooterTab> 
       <Button> 
        <Text>Bookings</Text> 
        <Icon name="ios-book-outline" /> 
       </Button> 
       <Button> 
        <Text>Blockout</Text> 
        <Icon name="ios-calendar-outline" /> 
       </Button> 
      </FooterTab> 
      </Footer> 
     </Container> 
    ); 
    } 
} 

AppRegistry.registerComponent('AwesomeNativeBase',() => AwesomeNativeBase); 

Je travaille sur je dois utiliser l'option « navigateur », mais je n'ai pas été en mesure de le faire fonctionner comme je ne sais pas comment les classes fonctionnent dans cette configuration.

+0

Je vous recommande de lire la code de [native-starter-kit] (https://github.com/start-react/native-starter-kit) également par l'équipe native-base. Dans ce projet, vous pouvez étudier plusieurs transitions de pages. – milkersarac

Répondre

1

Vous devez utiliser le composant onglets pour la navigation de l'écran (utilisation de tabBarPosition pour définir la mise tab), consultez le docs

Je ne sais pas pourquoi FooterTab toujours pas en charge la navigation à l'écran.

0

Utilisez une bibliothèque de navigation tels que React Navigation ou React native navigation

React Navigation est une javascript option basée alors que React naviagtion native est une implémentation plus native

Donnez-leur essayer