2017-03-22 10 views
0

私は、反応ネイティブを使用するあらゆる種類のアプリを初めて試みました。私はコンポーネント/スタイリングのネイティブベースを使用しています。私は非常に基本的なページを手に入れましたが、私はこれをどのようにしてフッターからクリックしたときに別のページに移動するのかを理解しようとしています。複数のページアプリ - ネイティブベースとネイティブで反応する

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

は、私が「ナビゲーター」オプションを使用する必要が出てきましたが、私はクラスがこの設定でどのように機能するかを確認していないとして、それは作業を取得することができていません。

+0

を試してみて、私は読んですることをお勧めいたします[native-starter-kit](https://github.com/start-react/native-starter-kit)のコードもネイティブベースのチームによって作成されています。そのプロジェクトでは、あなたが勉強できるいくつかのページ遷移があります。 – milkersarac

答えて

1

あなたはFooterTabはまだ画面ナビゲーションをサポートしていない理由を私は知らないdocs

を参照して、(タブの配置を定義するためにtabBarPositionを使用)、画面のナビゲーションのためのタブコンポーネントを使用する必要があります。

0

などReact NavigationReact native navigation

としてナビゲーションライブラリを使用して、ネイティブnaviagtionを反応させるのに対し、ナビゲーションではJavaScriptベースのオプションであるリアクトよりネイティブ実装です

は彼らに

関連する問題